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/

Jquery Validate allowing submit with rules not met

I have the following form that I am trying to add jquery validate to it. My issue is that none of the validation messages are appearing when I hit submit and if I hit submit twice, the form submits. So, essentially the validation is not working.
Does anyone see what I am doing wrong?
I am using the following libraries:
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<form method="POST" action="" id="proposal-form">
<div class="panel-input"><input type="text" id="proposal-name" class="proposal-input" placeholder="Name *"></div>
<div class="panel-input"><input type="email" id="proposal-email" class="proposal-input" placeholder="Email *"></div>
<div class="panel-input"><input type="tel" id="proposal-phone" class="proposal-input" placeholder="Phone *"></div>
<div class="panel-input"><input type="text" id="proposal-location" class="proposal-input" placeholder="Location *"></div>
<input type="submit" value="SUBMIT" id="panel-submit">
</form>
$("#proposal-form").submit(function (e) {
e.preventDefault();
$("#proposal-form").validate({
onfocusout : true,
errorPlacement: function(error, element) {
error.appendTo( element.parent("input").next("input") );
},
rules: {
proposal_name: {
required: true,
minlength: 2
},
proposal_email: {
required: true,
email: true
},
proposal_phone: {
required: true,
digits: true,
minlength: 10
},
proposal_location: {
required: true,
minlength: 2
}
},
messages: {
proposal_name: {
required: "Please enter your name",
minlength: "Your name seems a bit short."
},
proposal_email: {
required: "Please enter your email address",
email: "Please enter a valid email address"
},
proposal_phone: {
required: "Please enter your phone number",
digits: "Please enter a valid phone number",
minlength: "Your number seems a bit short."
},
proposal_location: {
required: "Please enter your name",
minlength: "Your name seems a bit short, doesn't it?"
}
},
submitHandler: function(form) {
var proposal_name = $('#proposal-name').val();
var proposal_email = $('#proposal-email').val();
var proposal_phone = $('#proposal-phone').val();
var proposal_location = $('#proposal-location').val();
$.ajax({
url: "php/proposal-send.php",
type: "POST",
data: {
"proposal_name": proposal_name,
"proposal_email": proposal_email,
"proposal_phone": proposal_phone,
"proposal_location": proposal_location
},
success: function (data) {
if (data == "Error!") {
alert(data);
} else {
$("#proposal-form")[0].reset();
$('#proposal-panel-inner').hide();
$('#proposal-success').fadeIn();
function successProposal() {
$('#proposal-panel').removeClass('active');
$('html').removeClass('is-navOpen');
$('.ssm-overlay').fadeOut();
}
setTimeout (successProposal, 2000)
}
},
error: function (xhr, textStatus, errorThrown) {
alert(textStatus + " | " + errorThrown);
}
});
}
});
});

Does anyone see what I am doing wrong?
The markup in your OP's code does not contain name attributes. Without name attributes, the validation will not work at all. See documentation. Not only must you have name attributes, only these names can be used within the rules object of .validate().
rules: {
proposal_name: { // <- this MUST match the NAME attribute only
required: true,
minlength: 2
}
....
Another major problem here is that the .validate() method is enclosed in a .submit() handler. Since the .validate() method is simply the plugin's initialization, AND the submit event is already captured and handled internally, you do not need your own .submit() event handler. (This is exactly why two clicks are needed). EDIT: A click handler is not much different. It's not needed and makes no sense (emphasis on "initialization", as in .validate() is the initialization method).
$("#proposal-form").submit(function (e) { // <- NOT needed
e.preventDefault(); // <- NOT needed
$("#proposal-form").validate({
onfocusout: true, // <- 'true' is NOT valid
....
You also do not need onfocusout: true because true is not an acceptable parameter for this option. The default behavior is to trigger validation on focus out, so setting onfocusout to true will break this plugin. It can only be set to false or an over-riding function.
$(document).ready(function() { // ensure DOM is ready
$("#proposal-form").validate({ // initialize plugin
// rules & options
....
Finally, the jQuery DOM traversal employed by your errorPlacement function does not seem to make any sense based on the posted markup.
element.parent("input").next("input")
There is no input next to the parent of the input. The parent of the input is a div and the next element is a div. The next input is inside of this div that is next to the parent. It also makes no sense why you'd want to place the error message on the following input element, especially for the last element, which would never display a message.
DEMO: jsfiddle.net/Lhouzn84/

Edit : Validation rules and message will match with name of the input element.
Please provide the name of your input control same as specified in Validation rules.

jQuery valid() method causes all errors to show

I am trying to use jquery validation to unhide a paypal button when the form is valid. I am using the valid() method as shown below. The problem is, that as soon as one key is pressed in any of the form elements, all of the errors show. How can I check if it's valid without firing all of errors?
$('#jValidate').validate({
rules:{
username:{
required:true,
minlength:6
},
email:{
required:true,
email:true
},
password:{
required:true,
minlength:8
},
confirm:{
required:true,
equalTo:"#password"
}
},
messages:{
username:{
required:"Username is required",
minLength:"Username must be at least 6 characters"
},
password:{
required:"Password is required",
minLength:"Password must be at least 8 characters"
},
confirm:{
required:"You must confirm your password",
equalTo:"Password Confirmation does not match"
}
}
});
$('#jValidate .form-control').keyup(function(){
if($('#jValidate').valid()){
$('#signup').show();
$('#disabled').hide();
}
});

var validator = $('#jValidate').validate({...rules, options});
validator.checkForm() // true if valid, false if not.

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();
...
}