The following code works in all browsers except IE. I need to fix it.
$(function () {
// Setup form validation on the #register-form element
$("form[name=firstform]").validate({
// Specify the validation rules
rules: {
username: {
required: true,
alpha: true
},
},
messages: {
username: {
required: "Please Provide Your Name",
alpha: "Name Should contains only alphabets",
},
},
submitHandler: function (form) {
form.submit();
}
});
});
Could somebody who has worked with IE for this type of jquery validation kindly help me to fix this problem?
Try to remove the trailing commas in your code:
$(function () {
// Setup form validation on the #register-form element
$("form[name=firstform]").validate({
// Specify the validation rules
rules: {
username: {
required: true,
alpha: true
} // Here
},
messages: {
username: {
required: "Please Provide Your Name",
alpha: "Name Should contains only alphabets" // Here
} // Here
},
submitHandler: function (form) {
form.submit();
}
});
});
Related
I am using client side validation plugin in my application. When I am validating a new from its working but when I am validating edit form its not working.
If anyone had done something similar, please suggest me how to proceed.
<script type="text/javascript">
$("#group_name").validate({
rules: {
"group[name]": {
required: true
},
"group[contact]": {
required: true
},
"group[contact_phone]": {
required: true
},
},
messages: {
"group[name]": {
required: "Required"
},
"group[contact]": {
required: "Required"
},
"group[contact_phone]": {
required: "Required"
},
},
onfocusout: function(element) {
this.element(element);
},
});
</script>
My form is using jquery validation. However, the validation is not firing. I am sure it is just a tiny mistake somewhere.. anyone?
Here is fiddle link http://jsfiddle.net/2L6xT/
BAsically here is my jquery validation code
$(document).ready(function () {
<!-- validation -->
$('#submitDetails').validate({
// 1. validation rules.
rules: {
firstName: {
required: true,
maxlength: 120
},
lastName:{
required: true,
maxlength: 120
},
custom1: {
required: true,
maxlength: 120
},
state: {
required: true
},
custom9: {
required: true
},
email: {
required: true,
email: true
}
},
// 2. Validation fail messages
messages: {
custom9: {
required: "You must agree to the terms of conditions in order to participate."
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == "custom9" )
error.appendTo("#error_msg");
else
error.insertAfter(element);
}
});
///execute when submit button is clicked
$("#submit").click(function () {
});
});
In your html, the input element doesnot have name, the validator framework uses name to apply the rules
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First name" />
so along with id add name also(id is not required if it is not used elsewhere)
Demo: Fiddle
I am using JQuery validation plugin.
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
Jquery code:
function validateForm(){
$('[name^="attribute"]').each(function(){
$(this).rules("add", {
required: true,
messages: {
required: "Mandatory field"
}
} );
});
$('[name^="valueAttribute"]').each(function(){
$(this).rules("add", {
required: true,
maxlength: 12,
email: true,
messages: {
required: "Enter email",
email: "Enter valid email",
maxlength: "Maximum 12 characters"
}
} );
});
return $("#myForm").validate({
onfocusout: function(element) { jQuery(element).valid(); }
});
}
But above script gives error as below.
TypeError: $.data(...) is undefined
am i doing anything wrong here? It works fine if i remove all for each and go with default messages.
Thanks!
you are not using $(document).ready();
try this
$(document).ready(function(){
// do script here
});
hope it will help
The only problem seems to be, you are adding the rules to the elements before the validator plugin is initialized for the form
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/additional-methods.js"></script>
then
jQuery(function ($) {
function validateForm(){
var validator = $("#myForm").validate({
onfocusout: function(element) { jQuery(element).valid(); }
});
$('[name^="attribute"]').each(function(){
$(this).rules("add", {
required: true,
messages: {
required: "Mandatory field"
}
} );
});
$('[name^="valueAttribute"]').each(function(){
$(this).rules("add", {
required: true,
maxlength: 12,
email: true,
messages: {
required: "Enter email",
email: "Enter valid email",
maxlength: "Maximum 12 characters"
}
} );
});
return validator;
}
});
Demo: Fiddle
I'm using jQuery Validator and I'd like to be able to disable the default focus behavior.
I am including the field names as values directly in the input fields themselves (like what you see in the "search" input at the top right side of Stack Overflow). The problem here, is that when I submit the form and a field is flagged as invalid, it automatically focuses on the field, which removes the field value.
This could be confusing for a user, as they no long know the purpose of that specific field. Is there any way to disable this behavior?
I've included my code below, in case that helps:
$(document).ready(function(){
jQuery.validator.messages.required = "";
jQuery.validator.addMethod("notEqual", function(value, element, param) {
return this.optional(element) || value !== param;
}, "");
$("#quoteForm").validate({
rules: {
firstName: {
required: true,
notEqual: "First name"
},
email: {
required: function(element) {return $("#emailAdd").val() == '';},
notEqual: "Email",
email: false
},
phone: {
required: function(element) {return $("#phoneNum").val() == '';},
notEqual: "Phone",
phoneUS: false
}
}
});
});
I found the answer to this and just wanted to share it here:
I simply needed to use focusInvalid: false.
Use Jeremy's answer like this:
$("#contactForm form").validate({
focusInvalid: false,
rules: {
name: "required",
email: {
required: true,
email: true
},
message: "required"
},
messages: {
name: 'Fill in name',
email: 'Fill in email',
message: 'Fill in message'
},
submitHandler: function(form) {
return SubmitContactForm();
}
});
$(document).ready(function () {
$("#frm").validate({
errorClass:"invalid",
rules: {
cname: { required: true,minlength:5 },
cemail: { required: true, email: true }
}
});
});
I am using above function to validate my html form. Validation is working fine. But I want to remove the default error message. I dont want to give any error message, just need to change the background color of the control for which validation fails.
You can just give them an empty error message string, like this:
$("#frm").validate({
errorClass:"invalid",
rules: {
cname: { required: true },
cemail: { required: true, email: true }
},
messages: {
cname: "",
cemail: ""
}
});
You can test it out here.