Validation not working right
I am trying to get my validate to work upon clicking my submit button. I don't want the fade out to occur unless everything in the form is right. My validation works on the page, but not when clicking the submit button..I don't want it to use my hide function unless the whole form is validated correctly. Here is my code. Anything here that jumps out to you guys? Fixed the wording of the question :)
<script type="text/javascript">
$(document).ready(function($){
$.supersized({
//Background image
slides : [ { image : 'images/pendulumWeb.jpg' } ]
});
$("form[name=emailSubmit]").validate({
rules: {
title: {
required: true
},
fName: {
required: true
},
lName: {
required: true
},
profession: {
required: true
},
email: {
required: true,
email: true
},
phone: {
number: true
}
},
messages: {
title: {
required: "Please enter your title."
},
fName: {
required: "Please enter your first name"
},
lName: {
required: "Please enter your last name."
},
profession: {
required: "Please enter your profession"
},
email: {
required: "Please enter your email"
}
}
});
$("form#emailSubmit").submit(function() {
// we want to store the values from the form input box, then send via ajax below
var title = $('#title').attr('value');
var fName = $('#fName').attr('value');
var lName = $('#lName').attr('value');
var profession = $('#profession').attr('value');
var email = $('#email').attr('value');
var phone = $('#phone').attr('value');
var message = $('#message').attr('value');
$.ajax({
type: "POST",
url: "ajax.php",
data: "title="+ title +"& fName="+ fName +"& lName="+ lName +"& profession="+ profession +"& email="+ email +"& phone="+ phone +"& message="+ message,
success: function(){
$('form#emailSubmit').hide(0,function() {
$('div#contact').fadeOut('fast ');
$('div.success').fadeIn(3000);
});
}
});
return false;
});
$('#contact').animate({height: '+=600开发者_StackOverflow社区px'}, 3000, 'easeInOutExpo');
$('#content').fadeIn(6000);
});
</script>
Here is my html
<body>
<form id="emailSubmit" name="emailSubmit" method="post">
<div id="submit">
<table>
<tr style="height: 20px;">
<td><span class="formTitles">Title*</span></td>
<td><input id="title" name="title" value="" size="5" max="3" type="text" />
</td>
</tr>
<tr style="height: 20px;">
<td><span class="formTitles">First Name*</span></td>
<td><input id="fName" name="fName" value="" size="20" type="text" /></td>
</tr>
<tr style="height: 20px;">
<td><span class="formTitles">Last Name*</span></td>
<td><input id="lName" name="lName" value="" size="20" type="text" /></td>
</tr>
<tr style="height: 20px;">
<td><span class="formTitles">Profession*</span> </td>
<td><input id="profession" name="profession" value="" size="20" type="text" /></td>
</tr>
<tr style="height: 20px;">
<td><span class="formTitles">Email*</span> </td>
<td><input id="email" name="email" value="" size="20" type="text" /></td>
</tr>
<tr style="height: 20px;">
<td><span class="formTitles">Phone</span></td>
<td><input id="phone" name="phone" value="" size="20" type="text" /></td>
</tr>
<tr style="height: 20px;">
<td><span class="formTitles">Message</span></td>
<td><textarea name="message" id="message" cols="50" rows="5"></textarea></td>
</tr>
<tr>
<td>aaaaaaaaaa</td>
<td></td>
</tr>
</table>
<table>
<tr>
<td><span class="formTitles"></span></td>
<td><button class="buttonPositive" type="submit"> Submit</button></td>
</tr>
</table>
</div>
</form>
<div id="contact">
<div id="content" style="display: none;">
</div>
</div>
<div class="success" style="display: none;">
</div>
Sorry to have taken so long; I had to go to an opera. The way to check form validity explicitly is to call ".valid()" and check the result; it returns true if the form is valid according to the rules you set up at initialization time:
$("form#emailSubmit").submit(function() {
if (!$(this).valid()) {
alert("Naughty naughty!");
return false;
}
// we want to store the values from the form input box, then send via ajax below
...
IMHO, you souhld use the same selector for both event :
$("form[name=emailSubmit]").validate({
$("form#emailSubmit").submit(function() {
By the way, when using selector with "id" (emailSubmit), you don't need to use the tag (form) selector. In former versions of jquery (<1.4 if i remember well), it was even slower.
Eventually, i do not well understand :
My validation up front works, but not when clicking the submit button.
What do you mean by validation up front VS clicking ?
Regards,
Max
加载中,请稍侯......
精彩评论