I have 3 fields in my form. I would like to validate Name, Age with an error class and Total_score with another error class. This is a single form contains single id. How can I do that.
$('#form1').validate({
rules: {
'Name' : {
required : true
},
'Age' : {
required: true
},
'Total_score' : {
required: true
}
},
messages: {
'Name' : {
required: 'From date is required!'
},
'Age' : {
required: 'To date is required!'
},
'Total_score' : {
required: 'Score is required!'
}
},
errorClass: '?????',
errorPlacement: function(err, element) {
err.insertBefore(element);
},
submitHandler: function(form) {
form.submit();
}
});
Try something like
<input name="Name" data-errorclass="error-name"/>
then
$('#form1').validate({
rules: {
'Name' : {
required : true
},
'Age' : {
required: true
},
'Total_score' : {
required: true
}
},
messages: {
'Name' : {
required: 'From date is required!'
},
'Age' : {
required: 'To date is required!'
},
'Total_score' : {
required: 'From date is required!'
}
},
errorPlacement: function(err, element) {
err.addClass(element.data('errorclass'))
err.insertBefore(element);
},
submitHandler: function(form) {
form.submit();
}
});
Demo: Fiddle
Related
What to change in the code below (.js from contact form) so that "nazwisko" field is not a required field? This is one file from .php contact form. I was checking some options but I`m not so familiar with .js. Is it enough to just erase this "nazwisko" line from the code or should I just put "false" next to the requirements?
Thank you for your support!
$(document).ready(function(){
/***************************************/
/* Form validation */
/***************************************/
$( '#j-forms' ).validate({
/* #validation states + elements */
errorClass: 'error-view',
validClass: 'success-view',
errorElement: 'span',
onkeyup: false,
onclick: false,
/* #validation rules */
rules: {
nazwisko: {
required: true
},
dataur: {
required: true
},
email: {
required: true,
email: true
},
'imiona-rodzice': {
required: true
},
telefon: {
required: true
},
klasa: {
required: true
},
szkola: {
required: true
},
adres: {
required: true
},
telkur: {
required: true
}
},
messages: {
nazwisko: {
required: 'Podaj swoje Imię i Nazwisko'
},
dataur: {
required: 'Podaj swoją datę urodzenia'
},
'imiona-rodzice': {
required: 'Podaj imiona rodziców'
},
telefon: {
required: 'Podaj telefon do rodziców'
},
klasa: {
required: 'Podaj swoją klasę'
},
szkola: {
required: 'Podaj swoją szkołę'
},
adres: {
required: 'Podaj swój adres'
},
telkur: {
required: 'Podaj swój telefon'
},
email: {
required: 'Podaj adres email',
email: 'Niepoprawny format'
},
},
// Add class 'error-view'
highlight: function(element, errorClass, validClass) {
$(element).closest('.input').removeClass(validClass).addClass(errorClass);
if ( $(element).is(':checkbox') || $(element).is(':radio') ) {
$(element).closest('.check').removeClass(validClass).addClass(errorClass);
}
},
// Add class 'success-view'
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.input').removeClass(errorClass).addClass(validClass);
if ( $(element).is(':checkbox') || $(element).is(':radio') ) {
$(element).closest('.check').removeClass(errorClass).addClass(validClass);
}
},
// Error placement
errorPlacement: function(error, element) {
if ( $(element).is(':checkbox') || $(element).is(':radio') ) {
$(element).closest('.check').append(error);
} else {
$(element).closest('.unit').append(error);
}
},
// Submit the form
submitHandler:function() {
$( '#j-forms' ).ajaxSubmit({
// Server response placement
target:'#j-forms #response',
// If error occurs
error:function(xhr) {
$('#j-forms #response').html('An error occured: ' + xhr.status + ' - ' + xhr.statusText);
},
// Before submiting the form
beforeSubmit:function(){
// Add class 'processing' to the submit button
$('#j-forms button[type="submit"]').attr('disabled', true).addClass('processing');
},
// If success occurs
success:function(){
// Remove class 'processing'
$('#j-forms button[type="submit"]').attr('disabled', false).removeClass('processing');
// If response from the server is a 'success-message'
if ( $('#j-forms .success-message').length ) {
// Remove classes 'error-view' and 'success-view'
$('#j-forms .input').removeClass('success-view error-view');
$('#j-forms .check').removeClass('success-view error-view');
// Reset form
$('#j-forms').resetForm();
// Prevent submitting the form while success message is shown
$('#j-forms button[type="submit"]').attr('disabled', true);
setTimeout(function(){
// Delete success message after 5 seconds
$('#j-forms #response').removeClass('success-message').html('');
// Make submit button available
$('#j-forms button[type="submit"]').attr('disabled', false);
}, 5000);
}
}
});
}
});
/***************************************/
/* end form validation */
/***************************************/
as #Amit said:
Only change this one line in rules section.
Not necessary to change or delete the message in message part itself.
/* #validation rules */
rules: {
nazwisko: {
required: false
},
Currently I'm looking to validate new created row before saving changes,
schema is not working to enforce the rules on the created row.
I need to let the user know what fields are required if he tried to save with an error message.
This example has already custom validation ,you can see it in the schema ,the problem it's not forcing validation before submitting to the server.
var gResult = new kendo.data.DataSource({
read:,
update:,
create:,
schema: {
model: {
id: "Id",
fields: {
Id: { type: 'number' },
Color: { type: 'string', defaultValue: "#000" },
Name: {type: 'string', validation: { required: true } },
Address1: { validation: { required: true } },
City: { validation: { required: true } },
Country: { validation: { required: true }, defaultValue: "Deutchland" },
PostalCode: { type: 'number', validation: { required: true } },
Emails: {
type: 'string',
validation: {
required: { message: "Email ID Required." },
validateEmailFormat: function (input) {
if (input.attr("data-bind") == "value:Email") {
input.attr("data-validateEmailFormat-msg", "Email format invalid.");
return checkEmail(input.val());
}
return true;
}
}
}
}
}
});
$("#gridResult").kendoGrid({
columns: GridColumns.Columns,
dataSource: gResult,
navigatable: true,
sortable: true,
height: 1000,
filterable: true,
pageable: GridProp.Pageable,
editable: true, toolbar: ["create", "save"] });
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 am trying to get a form to validate based on information that was submitted. Everything works fine if I make all fields required but my validation does not work as soon as I put in an if statement on the requirement.
Does not work:
var form = $( "#send_request_sms" );
form.validate({
rules: {
first_name: {
required: true
} ,
last_name: {
required: true
},
mobile: {
required: $('#email').val() ? false : true
},
email: {
required: $('#mobile').val() ? false : true
}
},
});
Works fine:
var form = $( "#send_request_sms" );
form.validate({
rules: {
first_name: {
required: true
} ,
last_name: {
required: true
},
mobile: {
required: true
},
email: {
required: true
}
},
});
Thanks for the help!
I generally use depends and works in my case
var form = $( "#send_request_sms" );
form.validate({
rules: {
first_name: {
required: true
} ,
last_name: {
required: true
},
mobile: {
required: {depends: function(element) {
return jQuery("#email").val() == '' ? true : false;
}
}
},
email: {
required: {depends: function(element) {
return jQuery("#mobile").val() == '' ? true : false;
}
}
}
}
});
I think you missed the order of email and mobile
var form = $( "#send_request_sms" );
form.validate({
rules: {
first_name: {
required: true
} ,
last_name: {
required: true
},
mobile: {
required: $('#mobile').val() ? false : true
},
email: {
required: $('#email').val() ? false : true
}
},
});
I would recommend moving the conditional statement outside the validate object.
e.g.
var form = $("#send_request_sms");
var mobileRequired = $('#email').val() ? false : true;
var emailedRequired = $('#mobile').val() ? false : true;
form.validate({
rules: {
first_name: {
required: true
},
last_name: {
required: true
},
mobile: {
required: mobileRequired
},
email: {
required: emailRequired
}
}
});
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 .