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 .
Related
I am using the validate.js plugin to validate my form. I have a method that validates at least one of the fields are filled in by the user. I used this Answer.
Here is my method:
$.validator.addMethod("require_from_group", function(value, element, options) {
var numberRequired = options[0];
var selector = options[1];
var validOrNot = $(selector, element.form).filter(function() {
return $(this).val();
}).length >= numberRequired;
if(!$(element).data('being_validated')) {
var fields = $(selector, element.form);
fields.data('being_validated', true);
fields.valid();
fields.data('being_validated', false);
}
return validOrNot;
}, "Please fill out at least 1 of these fields.");
The problem is that at least 1 field is filled works but the other required fields are being ignored.
Here is my form validation.
$("#clientaddressForm").validate({
submitHandler: function (form) {
// MY AJAX HERE
return false;
},
rules: {
addrcd: {
required: true
},
address1: {
required: true
},
areacode: {
required: true
},
zipcode: {
required: true
},
busname: {
required: function(element){
return $("#addrcd").val() != "R01" || $("#addrcd").val() != "R02" || $("#addrcd").val() != "R03";
}
},
tel: {
require_from_group: [1,".contactfillone"]
},
mobile: {
require_from_group: [1,".contactfillone"]
},
fax: {
require_from_group: [1,".contactfillone"]
},
},
messages: {
addrcd: {
required: "Please choose the address code",
},
address1: {
required: "Please enter the address",
},
areacode: {
required: "Please choose the area code",
},
zipcode: {
required: "Please choose the zip code",
},
busname: {
required: "Please enter the business/employment name",
}
},
errorPlacement: function(label, element) {
if(element.hasClass('web-select2') && element.next('.select2-container').length) {
label.addClass('mt-2 text-danger');
label.insertAfter(element.next('.select2-container'));
}
else{
label.addClass('mt-2 text-danger');
label.insertAfter(element);
}
},
highlight: function(element) {
$(element).parent().addClass('has-danger');
$(element).addClass('form-control-danger');
},
success: function(label,element) {
$(element).parent().removeClass('has-danger')
$(element).removeClass('form-control-danger')
label.remove();
}
});
}
What can I do to fix this?
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
},
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 have the JQuery validations below that just ensure that something is written within the input fields, I also have maxlength in the html.
However, I was hoping someone could shed some light on the situation and inform me on how I can add some type of minlength to the jquery code below so I don't require to do any additional functions?
$('#form1').submit(function (e) {
e.preventDefault();
}).validate({
rules: {
txtusername: {
required: true
},
txtfirstname: {
required: true
},
txtemail: {
required: true
},
txtpassword: {
required: true
},
passwordconfirm: {
required: true
}
},
messages: {
txtusername: {
required: "Please enter your Username."
},
txtfirstname: {
required: "Please enter your First Name."
},
txtemail: {
required: "Please enter your Email."
},
txtpassword: {
required: "Please enter your Password."
},
passwordconfirm: {
required: "Please enter your password again."
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().prev());
},
submitHandler: function (form, user) {
CheckUser(form);
return false;
}
});
Example HTML -
<div data-role="fieldcontainer">
<label for="txtusername" data-theme="d">Username:</label>
<input type="text" id="txtusername" name="txtusername" maxlength="12" placeholder="Enter Username"/>
</div>
You can use like below:
rules:{
txtusername: {
required: true,
minlength: 3
},
}
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