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>
Related
I am trying to create a validation plugin for web application which evaluates the form when only the form-id is passed to the plugin using javascript/jquery
This is the code i have written where i have used the name of each field to evaluate the input for the html page
$(document).ready(function () {
$('#formId').validate({
rules: {
'Name': {
required: true,
minlength: 3
},
'Email': {
required: true,
minlength: 5
},
'password': "required",
'Confirm_password': {
required : true,
equalTo: "#password"
},
'test': {
required: true
},
'Radio': { required: true },
'ddl': {
required: {
depends: function (element) {
if ('none' == $('#select_field').val()) {
$('#select_field').val('');
}
return true;
}
}
}
},
messages: {
'Name': {
required: "Enter the name",
minlength: "The name should be atleast of 3 characters "
},
'Email': {
required: "Enter the emailid",
minlength: "The emailid should be atleast of 5 characters"
},
'test': {
required: "Check atleast one box"
},
'Radio':
{
required:"Please select an option<br/>"
},
'ddl':
{
required: "Please select an option from the list"
}
},
submitHandler: function (form) {
alert('valid form submitted');
return false;
}
});
});
Use the Jquery Validation plugin.
Read this
I'm at coding a multi step form and have a question:
Is it possible in JavaScript or jQuery to activate this validation script:
<script type="text/javascript">
$(function (){
// Validation
$("#sky-form").validate({
// Rules for form validation
rules: {
country: { required: true },
industry: { required: true },
logoname: { required: true },
sloganch: { required: true }
},
// Messages for form validation
messages: {
country: { required: 'Please enter your name' },
industry: { required: 'Please check one of the options' },
logoname: { required: 'Please enter your Logo name' },
sloganch: { required: 'Please check one of the options' }
},
// Do not change code below
errorPlacement: function(error, element){
error.insertAfter(element.parent());
}
});
});
</script>
Only when this button is clicked :
<button type="button1" class="button next action-button" id="button4">Next</button>
It would be nice if the id="button 4" determine this function.
You can try this
$('#button4').click(function() {
$("#sky-form").validate({
// Rules for form validation
rules: {
country: { required: true },
industry: { required: true },
logoname: { required: true },
sloganch: { required: true }
},
// Messages for form validation
messages: {
country: { required: 'Please enter your name', },
industry: { required: 'Please check one of the options', },
logoname: { required: 'Please enter your Logo name' },
sloganch: { required: 'Please check one of the options' }
},
// Do not change code below
errorPlacement: function(error, element){
error.insertAfter(element.parent());
}
});
});
.validate() - to initialize the plugin (with options) once on DOM ready.
.valid() - to check validation state (boolean value) or to trigger a validation test on the form at any time.
The answer is :
$('#button4').click(function()
{
// Validation
$("#sky-form").validate({
// Rules for form validation
rules: {
country: { required: true },
industry: { required: true },
logoname: { required: true },
sloganch: { required: true }
},
// Messages for form validation
messages: {
country: { required: 'Please enter your name' },
industry: { required: 'Please check one of the options' },
logoname: { required: 'Please enter your Logo name' },
sloganch: { required: 'Please check one of the options' }
},
// Do not change code below
errorPlacement: function(error, element){
error.insertAfter(element.parent());
}
});
});
If button code
<button type="button1" class="button next action-button" id="button4">Next</button>
Special thanks go to Satpal who answered my question .
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();
}
});
});
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
$(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.