2012-04-09 124 views
0

嗨,大家好,我需要幫助,試圖找出爲什麼警告框不顯示,當我運行這個。我在編程方面也很新穎HTML我很好。 我現在正在參加一個PHP課程,老師認爲讓我們創建一個表單並驗證它會很有趣。我的問題是我試圖調用函數,然後將驗證它。我的問題是它沒有調用它,我不知道爲什麼。請幫忙?使用javascript的php表單驗證

JONS viladating

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 

<head> 
    <link rel="stylesheet" href="decor.css" type="text/css"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jons viladating</title> 
<script type="text/javascript"> 
<!-- <![CDATA[ 
    function showjonsForm() { 
var errors = ""; 
// check for any empty strings 
    if (document.forms[0].fname.value == "") 
     errors += "fname\n"; 
      if (document.forms[0].lname.value == "") 
     errors += "lName\n"; 
    if (document.forms[0].addrs1.value == "") 
    errors += "Address\n"; 
    if (document.forms[0].city.value == "") 
    errors += "City\n"; 
    if (document.forms[0].state.value == "") 
     errors += "State\n"; 
    if (document.forms[0].zip.value == "") 
     errors += "Zip\n"; 
    if (document.forms[0].phone.value == "") 
     errors += "Phone\n"; 
    if (document.forms[0].email.value == "") 
     errors += "Email\n"; 
    if (document.forms[0].pw2.value == "") 
     errors += "Confirm password\n"; 

    if (document.forms[0].dob.value == "") 
     errors += "Date of birth\n"; 
    if (document.forms[0].sex.value == "") 
    errors += "sex\n"; 
    // don't need to check checkboxes 
    if (errors != "") { //something was wrong})) 
     alert ("Please fix these errors\n" + errors) ; 
      return false; 
} 
     var stringx; 
    stringx = "fName:" + document.forms(0).fname.value; 
    stringx = "lName:" + document.forms(0).lname.value; 
    stringx += "\nAddress: " + document.forms(0).addrs1.value; 
    stringx += "\nCity: " + document.forms(0).city.value; 
    stringx += " \nState: " + document.forms(0).state.value; 
    stringx += " Zip: "+ document.forms(0).zip.value; 
    stringx += "\nPhone: " + document.forms(0).phone.value; 
    stringx += "\nE-mail:" + document.forms(0).email.value; 
    stringx += "\nConfirm password " + document.forms(0).pw2.value; 
    stringx += "\nDate of birth: " + document.forms(0).dob.value; 
    stringx += "\nSex: " + document.forms(0).sex.value; 
    alert(stringx); 
    return false //set to false to not submit 
} 
// ]]> --> 
</script> 
    <h1>jons validations test</h1> 
    </head> 
<body> 
    <div id="rightcolumn"> 
<img src="hula.gif" align="right"/> 
</div> 
<text align="left"> 
    <form name="jon" action="formoutput.php" onsubmit="return showjonsForm()"  Method="post"> 
    <fieldset style="width:250px"> 
    <label> first name</label> <input type="text" name="fname" size="15" maxlength="22" onBlur="checkRequired(this,'fname')"/><br /> 
    <label>last name</label> <input type="text" name="lname" size="10" maxlength="22">  <br /> 
</fieldset> 
    <fieldset style="width:250px"> 
    <label>address</label> <input type="text" name="adrs1" size="10" maxlength="30"><br /> 
    <span class="msg_container" id="adrs2"></span><br /> 
    <label>city</label> <input type="text" name="city" size="10" maxlength="15"><br /> 
    <span class="msg_container" id="city"></span><br /> 
    <label>state</label> <input type="text" name="state" size="10" maxlength="2"><br /> 
    <span class="msg_container" id="state"></span><br /> 
    <label>zip</label> <input type="text" name="zip" size="10" maxlength="5"><br /> 

    </fieldset> 
    <fieldset style="width:250px"> 
    <label>phone</label> <input type="text" name="phone" size="10" maxlength="10"><br /> 
    <div>please input phone number in this format 1234567892 thank you </div> 
    <label>email</label> <input type="text" name="email" size="10" maxlength="22"><br /> 
    <div> password must have 1 number upper case and minimum of 6 charcters</div> 
    <label>password</label> <input type="text" name="pw2" size="10" maxlength="12"><br /> 
    <label>select gender type</label> <select name="sex" size="1" <br /> 
    <option>male</option> 
    <option>female</option> 
    <option>timelord</option> 
    </select> 
    <label>date of birth</label> <input type="text name="dob" size="8" maxlength="8"/> 
    <div> would you like to know know more</div> 
    <label> yes</label> <input type="checkbox" checked="checked" name="check" /> 
    </fieldset> 
    <input type="submit"/></form> 

    </form> 
    <div id="footer"> 
    <img src="laps2.jpg"> <img src="orange.jpg"><img src="ok.jpg"> 
    </div> 
    </body> 
    </html> 

回答

0

<input type="text" name="adrs1" size="10" maxlength="30">

變化成

<input type="text" name="addrs1" size="10" maxlength="30">

因爲在你的JavaScript,它是document.forms[0].addrs1.value


沒有關係

你javascipt的看起來很笨重。也許你可以簡化它?

可以簡化所有這些document.forms[0].blah.value == ""分爲:(使用jQuery)

$("form > fieldset > input").each(function(){ 
    (this.value == "") && (errors += $(this).before().html() + "\n") 
}) 
0

我剛纔驗證2提起你的代碼我試圖給你完整的代碼,但在這裏我面對萬阿英,蔣達清縮進計算器爲爲此,我給你的圖像 enter image description here HTML代碼部分 enter image description here

0
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<link rel="stylesheet" href="decor.css" type="text/css"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>jons viladating</title> 
<script type="text/javascript"> 
function showjonsForm(form) 
    { 
    if(form.fname.value=="") 
    { 
     alert("Please Enter your First Name.."); 
     form.fname.focus(); 
     return false; 
    } 

    if(form.lname.value=="") 
    { 
     alert("Please Enter your Last Name.."); 
     form.lname.focus(); 
     return false; 
    } 


} 

</script> 

<body> 


<h1>jons validations test</h1> 
<form name="jon" action="#" onsubmit="return showjonsForm(this)"  Method="post"> 
<fieldset style="width:250px"> 
<label> first name</label> <input type="text" name="fname" size="15" maxlength="22" onBlur="checkRequired(this,'fname')"/><br /> 
<label>last name</label> <input type="text" name="lname" size="10" maxlength="22"> <br /> 
</fieldset> 
<input type="submit"/></form> 
    </body> 


</html> 

finaly我可以給你代碼:)