Develop Reference

jquery choosen select validation messages are not dis-appering untill the form submit

jQuery chosen select validation messages are not disappearing until the form submit. I applied required validation if I submit the form without choosing the value error message is displaying. But after I choose it is not disappearing as normal select boxes, it is staying until the form submit.
$.validator.setDefaults({ ignore: ":hidden:not(.chosen-select)" });
$("#postJob").validate({
rules: {
skills:{
required:true,
},
});

please provide a running code snippets to understand the problem more easily.
jQuery validate messages are disappeared once the validation is fulfilled.
$(document).ready(function () {
$("#form").validate({
rules: {
"name": {
required: true,
minlength: 5
},
"email": {
required: true,
email: true
}
},
messages: {
"name": {
required: "Please, enter a name"
},
"email": {
required: "Please, enter an email",
email: "Email is invalid"
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});
Here is the fiddle:
http://jsfiddle.net/amwmedia/sw87W/

Contact form validations using jquery

I'm trying to validate a contact form using this code. But I could not get appropriate validations for phone number,zip code and message.
$(function() {
$("form[name='contact']").validate({
rules: {
username: "required",
email: {
required: true,
email: true
},
phno:"required",
zipcode: {
required:true,
zipcode:true
},
msg:"required"
},
messages: {
username: "Please enter your username",
email: "Please enter a valid email address",
phno:"Please enter phone number",
zipcode:"Please enter zip code",
msg:"Please enter message"
},
submitHandler: function(form) {
form.submit();
}
});
});

As mentioned in jquery validation plugin library use phoneUS and zipcodeUS instead of phno and zipcode.

How to have an alert and document.getElementById().focus() in ajax?

How do I have these alert('Please input your firstname.'); document.getElementById ("firstname").focus(); inside my ajax code where the error message shows? Because I have it in text in my webpage but I want it to be an alert and focus on the input id like the one javascript. How do I do it here?
<script type="text/javascript">
$('document').ready(function()
{
$("#register-form").validate({
rules:
{
firstname: {
required: true
},
lastname: {
required: true
},
},
messages:
{
firstname:"Please input your firstname.",
lastname:"Please input your lastname.",
},
submitHandler: submitForm
});
});
</script>

check if form validation is true

Hello i have a form that i want to run through form validation and then submit. How can i check if the following function returns true to know that everything has been validated and then submitted?
I created a fiddle to test
http://jsfiddle.net/WHGq2/
MODIFIED CODE
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript">
$(function(){
$("#form").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
},
phone: {
equired: true,
phone: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
phone: "Please provide a valid phone number.",
}
})
$('#form').submit(function(e){
// Stop the form actually posting
e.preventDefault();
// I want to be able to do the check here if the form has passed validation
if( $(this).valid() ) {
// Stop the form actually posting
// Send the request
$.post('/submit.php', {
name: $('#name').val(),
email: $('#email').val(),
phone: $('#phone').val(),
message: $('#message').val()
}, function(d){
alert("Thank you for submitting your request someone will contact your shortly.");
});
}
});
});
</script>

You can call the valid() method of jquery validation. Like
if($('#form').valid())
Actually you can declare the validate function when the html page is loaded and just check whether it's valid or not at the time of submit
$(document).ready(function(){
$('#form').validate(rules...messages...);
In case of rules & messages use:-
rules: {
name: {
required: true
},
email: {
required: true,
email: true
},
phone: {
required: true,
phone: true }
},
messages: {
name: { required : "Please let us know who you are."},
email: {required : "A valid email will help us get in touch with you.",email : "A valid email will help us get in touch with you."},
phone: {required:"Please provide a valid phone number.",phone:"Please provide a valid phone number."}
}
It's a good practice and in case of phone numbers, you've misspelled required
$('#form').submit(function(evt) {
evt.preventDefault();
.....
if( $('#form').valid() ) {
//submit the form via ajax
} else {
//show errors
}
});
});
And I think you know than you've to add the name attribute of each input field:-
<input type="text" name="email" />

Please note that required in the phone rule was written equired and could have caused most of your issues. See the demo included.
$(function() {
$('#form').validate(.......);
$('#form').submit(function(e) {
e.preventDefault();
.....
if( $(this).valid() ) {
//submit the form via ajax or otherwise
} else {
//report errors
}
});
});
JSFIDDLE DEMO

You can use valid method of the plugin, something like following.
$('#form').validate({...});
if ($('#form').valid()) {
// do your thing
}
here is the documentation http://jqueryvalidation.org/valid

Updated your code, added submitHandler ,Callback for handling the actual submit when the form is valid.
<script type="text/javascript">
$(function(){
$('#form').submit(function(e){
$("#form").validate({
debug: false,
rules: {
name: "required",
email: {
required: true,
email: true
},
phone: {
equired: true,
phone: true
}
},
messages: {
name: "Please let us know who you are.",
email: "A valid email will help us get in touch with you.",
phone: "Please provide a valid phone number.",
},
submitHandler: function() {
// Stop the form actually posting
e.preventDefault();
// Send the request
$.post('/submit.php', {
name: $('#name').val(),
email: $('#email').val(),
phone: $('#phone').val(),
message: $('#message').val()
}, function(d){
alert("Thank you for submitting your request someone will contact your shortly.");
});
}
});
});
});
</script>

Multi-page jQuery form not submitting

Here is the jQuery code
$("#register-form").submit(function (e) {
e.preventDefault();
}).validate({
rules: {
name: "required",
address: "required",
phone: "required",
landmark: "required",
pincode: "required",
city: "required",
email: {
required: true,
email: true
}
},
messages: {
name: "Please enter your name",
address: "Please enter your address",
phone: "Please enter your phone",
landmark: "Please enter your landmark",
pincode: "Please enter your pincode",
city: "Please enter your city",
email: "Please enter a valid email address"
},
submitHandler: function (form) {
//form.submit();
//alert("Do some stuff...");
$("#step1").hide();
//$('#step1img').css('opacity','0.5');
//$('#step2img').css('opacity','1');
$("#step2").show();
//submit via ajax
return false;
}
});
// });
$("#back").click(function () {
$("#step1").show();
$("#step2").hide();
});
function submitform() {
document.getElementById('#register-form').submit();
}
this is my fiddle , http://jsfiddle.net/bd4T2/ i have tried multipage form , using jquery validation js , but form is not submitting

okay, I copied the code out of the fiddle (which wasn't working and did not include the jquery library) and i found the error in the submitform function, you've got a hash in front of the form id when using the dom to find the form:
function submitform() {
document.getElementById('#register-form').submit(); //<-- '#register-form'
}
//this is not going to work, you were looking to use jquery here
document.getElementById('#register-form').submit();
will not work, because there's no # in the form id, so it should read like this;
function submitform() {
$('#register-form').submit();
}