Develop Reference

Jquery Validation All Errors shows in one alert box only

I have a form where I can do jquery validation in one by one show error in an alert box.
I have required to show all validation error messages into one alert box for all those required fields (single or multiple fields) and not repeat the alert box display one-time only.
Is this possible?
example :
Here! the Issue
<form id="myform" action="post">
<input type="text" name="email" />
<input type="text" name="name" />
<input type="submit" />
</form>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var allerror="";
$('#myform').validate({ // Jquery Validation
onclick: false,
onkeyup: false,
rules: {
email: {
required: true,
email: true
},
name: {
required: true,
minlength: 5
}
},
messages: {
email: {
required: "The Email is required!"
},
name: {
required: "The name is required!"
}
},
errorPlacement: function (error, element) {
allerror += error.text();
alert(allerror);
}
});
});
</script>

Instead of errorPlacement use invalidHandler as follow:
invalidHandler: function(form, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
if (validator.errorList.length > 0) {
for (x=0;x<validator.errorList.length;x++) {
errors += validator.errorList[x].message;
}
}
alert(errors);
}
}
Edit :
If you dont want html labels for errors this should work :
errorPlacement: function (error, element) {
return false;
},

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/

How do I show a loading gif after clicking submit, but undo it if validations aren't met

I have a few forms live. My forms use jQuery validator for the front-end. I have a method in place right now that switches out my submit button with a loading gif. The issue is that when the validations aren't met the gif continues, not giving the user the chance to resubmit the form. I've included some of my code below, any help as appreciated.
HTML
<div id="subbuttonfirst">
<button onclick="anothermethod.local.submit(this.form); ButtonClicked();" class="action submit btn btn-success" >Submit</button>
JS (Replacing function)
<script type="text/javascript">
function ButtonClicked()
{
document.getElementById("subbuttonfirst").style.display = "none"; // to undisplay
document.getElementById("loadbutton").style.display = ""; // to display
return true;
}
var FirstLoading = true;
function RestoreSubmitButton()
{
if( FirstLoading )
{
FirstLoading = false;
return;
}
document.getElementById("subbottonfirst").style.display = ""; // to display
document.getElementById("loadbutton").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;
</script>
jQuery Validations:
$('.form').validate({ // initialize plugin
// ignore:":not(:visible)",
rules: {
randomone: {
required: true,
number: true,
},
random: {
required: true,
number: false,
},
}
});

Take a look to the options in the plugin documentation: http://jqueryvalidation.org/validate the invalidHandler option is what you are looking for.
You coul'd try something like this:
$('.form').validate({ // initialize plugin
// ignore:":not(:visible)",
rules: {
randomone: {
required: true,
number: true,
},
random: {
required: true,
number: false,
}
},
invalidHandler: function(event, validator) {
RestoreSubmitButton();
}
});
EDIT - A working example
The form:
<form class='form' action="?" method="post">
<input name="randomone" id="randomone" type="text" />
<input name="random" id="random" type="text"/>
<div id="subbuttonfirst">
<button class="action submit btn btn-success" >Submit</button>
<div class="loadbutton">
loading
</div>
</div>
</form>
The js code
$('.form').validate({ // initialize plugin
// ignore:":not(:visible)",
rules: {
randomone: {
required: true,
number: true,
},
random: {
required: true,
number: false,
}
},
submitHandler: function(){
$(".submit").hide();
$(".loadbutton").show();
},
invalidHandler: function(){
$(".submit").show();
$(".loadbutton").hide();
}
});
A working fiddle

Using invalidHandler with a callback that replaces the gif with the button.

Submit handler is working but its very slow

Hello guys I am submitting my form using submit handler and its working but its very slow. Please help me to make it fast. Thanks in advance
Following is my javascript code for login form......
var handleLoginForm = function () {
$('.login-form').validate({
errorElement: 'label', //default input error message container
errorClass: 'help-inline', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
username: {
required: true
},
password: {
required: true
},
user_type: {
required: true
},
remember: {
required: false
}
},
messages: {
username: {
required: "Username is required."
},
password: {
required: "Password is required."
},
user_type: {
required: "User Type is Required."
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
$('.alert-error', $('.login-form')).show();
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.control-group').addClass('error'); // set error class to the control group
},
data: $('#form_modulesadd').serialize(),
success: function (label) {
label.closest('.control-group').removeClass('error');
label.remove();
},
errorPlacement: function (error, element) {
error.addClass('help-small no-left-padding').insertAfter(element.closest('.input-icon'));
},
submitHandler: function (form) {
$( ".login-form input" ).submit();
window.location.href = "check.php";
}
});
It was fast when i was submitting the form using php but I must have to use javascript to submit this form......

Run the JS when the form is submitted:
$(".login-form").submit(function(){
$('.login-form').validate({
errorElement: 'label', //default input error message container
errorClass: 'help-inline', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
username: {
required: true
},
password: {
required: true
},
user_type: {
required: true
},
remember: {
required: false
}
},
messages: {
username: {
required: "Username is required."
},
password: {
required: "Password is required."
},
user_type: {
required: "User Type is Required."
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
$('.alert-error', $('.login-form')).show();
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.control-group').addClass('error'); // set error class to the control group
},
data: $('#form_modulesadd').serialize(),
success: function (label) {
label.closest('.control-group').removeClass('error');
label.remove();
},
errorPlacement: function (error, element) {
error.addClass('help-small no-left-padding').insertAfter(element.closest('.input-icon'));
},
submitHandler: function (form) {
$( ".login-form input" ).submit();
window.location.href = "check.php";
}
});
});
This keeps the JS from running until the form is submitted.
UPDATE:
$(".login_form").submit(function(){
$(this).validate({ ... });
});
Not sure if this will work, but the repeated selector seemed a bit awkward to me.

I solved the same problem by changing the implementation of submitHandler like below. I just take the first item [0] of the forms selector.
submitHandler: function (form) {
$(".login-form input")[0].submit();
...
}

show all validation errors at once and not allow submit until fixed

So, I'm using validate.js and I have the below on my form; which displays the error message for the first field (firstname) but that's it! How do I show all the errors at once and not allow submission until fixed?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="js/main.js"></script>
$(document).ready(function () {
$('.plastic').slideDown('fast');
$('#contactform').validate({ // initialize the plugin
// errorPlacement: function(){
// return false;
// },
submitHandler: function (form) {
$('.formcolumn').hide();
$('.button').hide();
$('.thanks').fadeIn();
// alert('valid form submitted');
return false; // for demo
}
});
});
Essentially it only seems to validating the first name?
I tried this:
$('.button').click(function () {
$('#contactform').valid(); // run a validity test on the form (shows any errors)
});

Try this:
$('#contactform').validate({
rules: {
name: {
required: true
},
subject: {
required: true
},
// Add more fields here
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-inline',
errorPlacement: function(error, element) {
error.insertAfter(element);
},
submitHandler : function(form) {
form.submit();
}
});
Edit:
Your HTML should look like this:
<span class="form-group">
<input type="text" name="name" id="name" />
</span>