I am using a select method in form and when I click on submit method without filing the form, various errors are shown which I have included in validate methods, like first name required, email required, etc.
So the problem is when I start entering the first name, the error disappears. But the same is not happening in case of select method. When I select certain options there, the error still remains saying, select at least one option. This error goes away when I click submit button. But I want this error to go away when I select at least one option, like in the case of first name when I start typing, the error goes away.
I have included my validation methods in $(document).ready(function()
Any help will be appreciated.
The following is the code snippet:
var newusercontainer = $('#newUsererrorcontainer');
var newuservalidator = $("#newUserForm").validate({
submitHandler: function(form) {
registerUser();
},
errorContainer: newusercontainer,
errorLabelContainer: $("ul", newusercontainer),
wrapper: 'li',
meta: "validate",
rules: {
newUserFirstName: {
required:true,
maxlength:50,
},
sector: {
required: true,
},
},
messages: {
newUserFirstName: {
required: "The First name field is required.",
maxlength: "Please enter with in 60 characters"
},
sector: {
required: "The Sector field is required.",
},
}
});
Related
In this project I have the following jquery code to validate a form. It works fine, but i'd like it to be more specific by implementing a more thorough validation for UK reg plates.
My javascript code is:
function ValidateSspcpForm()
{
$('#SspcpForm').validate({
rules: {
'sspcp[reg]': {
required: true,
rangelength: [2, 8],
},
messages: {
'sspcp[reg]': {
required: "Your car's registration is required in advance, Please input one here.",
rangelength: "The registration number must be between 2 and 7 characters in length"
},
}
});
}
The method I want to implement is this, it seems to cover everything for UK plates which is perfect for my use case:
(^[A-Z]{2}[0-9]{2}\s?[A-Z]{3}$)|(^[A-Z][0-9]{1,3}[A-Z]{3}$)|(^[A-Z]{3}[0-9]{1,3}[A-Z]$)|(^[0-9]{1,4}[A-Z]{1,2}$)|(^[0-9]{1,3}[A-Z]{1,3}$)|(^[A-Z]{1,2}[0-9]{1,4}$)|(^[A-Z]{1,3}[0-9]{1,3}$)
Any help or ideas would be much appreciated!
Found it. Definitely appears to be quite simple. I'm new to JavaScript, so wasn't aware it would let you outside of the validate method. For anyone else searching, this is how you would implement UK registration plate validation with jquery.validate:
function ValidateSspcpForm()
{
$.validator.addMethod('Registration', function(value){
return /^(^[A-Z]{2}[0-9]{2}\s?[A-Z]{3}$)|(^[A-Z][0-9]{1,3}[A-Z]{3}$)|(^[A-Z]{3}[0-9]{1,3}[A-Z]$)|(^[0-9]{1,4}[A-Z]{1,2}$)|(^[0-9]{1,3}[A-Z]{1,3}$)|(^[A-Z]{1,2}[0-9]{1,4}$)|(^[A-Z]{1,3}[0-9]{1,3}$)|(^[A-Z]{1,3}[0-9]{1,4}$)|(^[0-9]{3}[DX]{1}[0-9]{3}$)/.test(value);
}, 'reg validation has failed');
$('#SspcpForm').validate({
rules: {
'sspcp[reg]': {
required: true,
rangelength: [2, 8],
Registration: true
},
},
messages: {
'sspcp[reg]': {
required: "Your car's registration is required in advance, Please input one here.",
Registration: "This registration number is not a recognised UK plate"
},
}
});
}
I have a page similar to the below given diagram,
The page has multiple sections (User Information, Account Information etc;) as well as common controls (like subject textbox, date textbox etc)
When the user clicks on Add button in user information section, it has to validate the associated controls
When the user clicks on the Submit button in the top, the subject textbox and the table should be validated for required data.
How can I achieve this?
I am able to validate the user section but not sure how to proceed with global validation on the page.
TypeScript:
class Validation {
static FormTrackingId = '#FormTracking';
private static ApplyRules() {
$(Component.SelectId).rules("add", {
required: true,
messages: {
required: "Name is required."
}
});
$(Component.TextBoxNumberId).rules("add", {
required: true,
messages: {
required: "Number is required."
}
});
$(Component.TextAreaNotesId).rules("add", {
maxlength: 10,
messages: {
maxlength: jQuery.validator.format("The maximum allowed length of note(s) is {0} characters.")
}
});
}
public static IsValid(): boolean{
$(Validation.FormTrackingId).validate();
Validation.ApplyRules();
return $(Validation.FormTrackingId).valid();
}
}
Any suggestion on how to handle this scenario will be greatly appreciated. Thanks.
This problem, i am sure is very trivial but i am not able to get past it.
My form is not getting validated using jquery validate.
$(document).ready(function () {
$("#loginForm").validate({
rules: {
email: "required",
passwd: "required",
email:{
minlength: 10
}
},
messages: {
email: "Please enter your email",
passwd: "Please enter your passwd",
email:{
minlength: "Minlength has to be 10"
}
},
submitHandler: function(form) {
$("#pp").text("right");
form.submit();
}
});
})
No console errors. I have following
name, passwd are name, id of the fields i am trying to validate and loginForm is id of form. The problem is i don't see the error messages when i pass invalid input. Going through debug mode, i don't see the stack reaching inside validate function ever although an alert inside ready function before validate is called.
You did not show your HTML markup, so this answer assumes you correctly named your input elements.
In your code, you're specifying email twice...
rules: {
email: "required",
passwd: "required",
email:{ // <- duplicate
minlength: 10
}
},
If you need to specify multiple rules for one field, then specify the field once and list the rules inside...
rules: {
email: {
required: true,
minlength: 10
},
passwd: "required"
},
Your messages option has the same problem.
Working DEMO: http://jsfiddle.net/4937t/
When using the jQuery validation plugin (http://docs.jquery.com/Plugins/Validation/validate):
I want the following behavior: Validate as soon as the user presses submit (instead of actually submitting I am using an ajax post request).
What happens though is the following: As soon as submit is pressed, validation runs, I get a validation error when applicable, then when I correct the mistake, and press submit the form gets re-validated, but when there are no validation errors, the ajax post is not made, only the form gets validated.
When there are no validation errors in first instance, the post is made instantly, like it should.
I have the following:
<script type="text/javascript">
$(document).ready(function(){
$("#form").validate({
onkeyup: false,
onclick: false,
onsubmit: true,
rules: {
telNR: {
required: true,
digits: true,
minlength: 10
}
},
messages: {
telNR: {
required: "Fill in a valid telephone NR",
minlength: "A telephoneNR is 10 characters long",
digits: "Use only numerics"
}
},
submitHandler: function(form) {
var jqxhr = $.post("sendMail.php", { telNR: $("#telNR").val() },
function(data) {
alert("Done");
})
.error(function(jqXHR){
alert("Error");
});
}
});
})
</script>
You may be having some ghost validation errors. Try adding the following to your options to cleanup the errors on focus of the form:
focusCleanup: true
I'm using the validation plugin for jquery:
http://docs.jquery.com/Plugins/Validation.
I want to know how would I exempt a field to be validated? Currently all fields inside the form are automatically checked.
I am not sure if this will help since the element that I want to exempt is not included (obviously :) )
$("#contactForm").validate({
rules: {
first_name:{required: true,charsonly:true,minlength: 1 },
last_name:{required:true,charsonly:true,minlength: 1 },
birthday:{required:true,min:1,max:31 },
birthmonth:"required",
birthyear:"required",
username: {required: true,minlength:1,maxlength:32,username:true,notChinese:true,noSpecial:true},
password1:{required:true,minlength: 5,maxlength: 10, alphaNum: true },
password2:{required:true,minlength: 5,maxlength: 10, alphaNum: true, equalTo: "#password1"},
currency:"required",
address:{required: true,noSpecial:true,minlength:2},
city:{required: true,noSpecial:true,minlength:2},
state:{noSpecial:true},
countrycode:"required",
zip:{required:true,zipTest:true},
email:{required:true,email: true},
confirmemail:{required: true,equalTo: "#email",email:true},
phone:{required: true,minlength:6,maxlength:20,phoneUS:true},
cellphone:{required: true,minlength:6,maxlength:20,phoneUS:true},
custom06:{acceptIM:true}
} });
Found it.
I used the ignore validation method.
Here's the code
$("#myform").validate({
ignore: ".ignore"
})
It depends on class attribute. See examples:
This field is required and email format: it cannot be empty
input class="required email"
This field is NOT required and email format: it can be empty
input class="email"
This field is NOT required and doesnt have format: it can be empty
input class=""
Are you using some sort of server side technology? The validation library needs to have rules set, and if you are doing this in strictly javaScript (jQuery) it is manual.
UPDATE: You can remove rules with the following: http://docs.jquery.com/Plugins/Validation/rules#.22remove.22rules
Place the following at the end of the body.
$("selector").rules("remove");
You could set your own messages:
$("#contactForm").validate({
rules: {
input1: required,
input2: required,
no-validation: required,
input4: required,
},
messages: {
no-validation: ''
}
});
Just put an empty string for the field you don´t want to show any message for..