当前位置: 动力学知识库 > 问答 > 编程问答 >

jquery - Validation wont work.It wont display error message..what could be wrong?

问题描述:

I have the following code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Registration</title>

<script type="text/javascript" src="lib/jquery/jquery-1.4.2.js"></script>

<script type="text/javascript" src="/dateplugin.js"></script>

<link rel="stylesheet" type="text/css" href="/stylez.css"/>

<script type="text/jscript">

$(document).ready(function(){

//$.dateSelectBoxes('mon','da','yea');

//form validation

var hasError = false;

var emailReg = /^([w-.][email protected]([w-]+.)+[w-]{2,4})?$/;

var email = $("#em").val();

var fname=$("#fn").val();

var lname=$("#ln").val();

var school=$("#sch").val();

var classes=$("#clas").val();

var grade=$("#yr").val();

var month=$("#mon").val();

var days=$("#da").val();

var years=$("#yea").val();

var pass=$("#pas").val();

var zipcode=$("#zip").val();

$("#submitbutton").click(function(e){

if (fname==''){

$("#fn").after("Please enter your first name ");

hasError=true;

}

if (lname==''){

$("#ln").after("Please enter your last name");

hasError=true;

}

if(school==''){

$("#sch").after("Please enter the name of your institution");

hasError=true;

}

if (classes==''){

$("#clas").after("Please enter current classes you are taking");

hasError=true;

}

if (month=='' || day=='' || year==''){

$("#mon").after("Please enter your birthday");

hasError=true;

}

if (pass==''){

$("#pas").after("Please enter the password");

hasError=true;

}

if (zipcode==''){

$("#zip").after("Please enter your zipcode");

hasError=true;

}

if (grade==''){

$("#yr").after("Please enter the year you are in");

hasError=true;

}

if(email == '') {

$("#em").after("You forgot to enter the email address to send ");

hasError = true;

} else if(!emailReg.test(email)) {

$("#em").after("Enter a valid email address to send to.");

hasError = true;

}

if (hasError == true) {

e.preventDefault();

}

else{

//submit form via ajax

}

});

});

</script>

<style type="text/css">

</style>

</head>

<body class="fancy">

<form action="" method="" accept-charset="utf-8">

<table width="800" border="0" cellpadding="1" cellspacing="0" >

<tr>

<td id="column1">

</td>

<td id="column2">

<div class="Sintext"><h1>Sign Up</h1></div>

<div>

<label>First Name</label>

<input type="text" name="fnam" class="fields" id="fn" />

</div>

<div>

<label>Last Name</label>

<input type="text" name="lnam" class="fields" id="ln"/>

</div>

<div >

<label>School</label>

<input type="text" name="scname" class="fields" id="sch"/>

</div>

<div>

<label>Major</label>

<select id="majo" name="major">

<option value="5">&mdash;undeclared&mdash;</option>

</select>

</div>

<div>

<label>Current Classes</label>

<input type="text" name="class" id="clas" class="fields"/>

<span>add class field</span>

</div>

<div>

<label>Year</label>

<select id="yr" name="year">

<option value="">&mdash;Select the year &mdash;</option>

<option value="10">Freshman </option>

<option value="20">Sophomore</option>

<option value="30">junior</option>

<option value="40">senior</option>

<option value="50">Alumni </option>

<option value="60">HighSchool </option>

</select>

</div>

<div >

<label>Campus</label>

<input type="text" name="campus" class="fields" />

</div>

<div >

<label>Email</label>

<input type="text" name="email" id="em" class="fields"/>

</div>

<div >

<label>Password</label>

<input type="text" name="passwd" id="pas" class="fields"/>

</div>

<div >

<label>Sex</label>

<select name="sex" class="sexfield">

<option value="3">Male</option>

<option value="4">Female </option>

</select>

</div>

<div id="bdate">

<label>Birthday</label>

<select id="mon" name="mont">

<option value="0">Month</option>

</select>

<select id="da" name="day">

<option value="1">Day</option>

</select>

<select id="yea" name="year">

<option value="2">Year</option>

</select>

</div>

<div >

<label>Zipcode</label>

<input type="text" name="zipcod" id="zip" class="zipfield"/>

</div>

<div >

<button id="submitbutton" class="sinbutton">Sign Up</button>

</div>

</td>

</tr>

</table>

</form>

</body>

</html>

网友答案:

Well, first of all:

    <div ">   <--- Invalid Markup
        <label>Password</label>
        <input type="text" name="passwd" id="pas" class="fields"/>
    </div>

 <table width="800" border="0" cellpadding="1" cellspacing="0" />  <--- self closing Table......

your Email-regex is invalid.

And last: change:

 $("#sign").click(function(e) {
 })

to:

 $("#submitbutton").click(function(e) {
 });

and

<button type="submit" id="submitbutton"  class="sinbutton">Sign Up</button>

to

 <button id="submitbutton"  class="sinbutton">Sign Up</button>

and

   if (hasError == true) {
        return false;
    }
    else {
        //submit form via ajax
    }

to

    if (hasError == true) {
        e.preventDefault();
    }
    else {
        //submit form via ajax
    }

UPDATE

Your regex is still invalid! Uncomment the regex, and the code that checks it to take it out of the equation for now.

you're declaring:

var days=$("#da").val();

but later on you're trying to access the variable "day" that doesn't exist.

same thing here: var years=$("#yea").val(); but accessing variable year:

  if (month=='' || day=='' || year==''){

First: You need to learn how to use FireBug (Firefox), Developer Tools (IE) or the inspector in Chrome, because the javascript errors are displayed there.

Second: you should learn how to format your questions properly. I've had to edit your question twice now, cleaning it up.

Third: When posting questions regarding HTML/Javascript/CSS, you should use jsfiddle.net to demo your code. Take a look at this:

http://jsfiddle.net/yngvebn/FdunX/

网友答案:

because you have form an submit button when you click the button form is submitting. Change the code like that

$("#sign").click(function(e){
    e.preventDefault();
    .
    .
    .
分享给朋友:
您可能感兴趣的文章:
随机阅读: