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;
},
Related
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 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>
I am using the jQuery validation plugin to validate my password settings form.
I have below issues with my code.
"submitHandler" callback is not hit when I submit the form.
"highlight" is hit but has-error is not added into the element which is having the error.
I am submitting the form using click event as seen below:
$('#updatePasswordButton').click(function () {
postSettings();
});
Code
$("#PasswordForm").validate({
rules: {
PASSWORD1: {
required: true,
},
PASSWORD2: {
equalTo: "#PASSWORD1"
}
},
messages: {
PASSWORD2: "The passwords do not match"
},
//TODO yet to highlight the DOM element which has validation error
highlight: function(element, errorClass) {
$(element).closest('.form-control').addClass('has-error');
},
unhighlight: function(element, errorClass) {
$(element).closest(".form-control").removeClass("has-error");
},
submitHandler: function(form) {
console.log("submit handle");
return false;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<form name="PasswordForm" id="PasswordForm" method="post">
<td id="updatePassword">
<a id="updatePasswordButton" class="btn btn-sm btn-bitbucket" name="setPassword">
<i id="updatePass" class="demo-icon icon-lock"> </i> UPDATE PASSWORD</a>
</td>
</form>
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();
...
}
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>