I have rule:
cmp_email: {
minlength: 5,
required: true,
email: true,
remote: {
url: "\/client\/check-email",
type: "post"
}
},
And for remote rule I want to place an error message: "This email already exist" inside alert-error class. Is this is possible with jQuery validation plugin ?
It is possible, yes, using the messages option to jQuery Validate.
$('form').validate({
rules: {
cmp_email: {
minlength: 5,
required: true,
email: true,
remote: {
url: "\/client\/check-email",
type: "post"
}
},
},
messages: {
cmp_email: {
remote: "This email already exists"
}
}
});
Yes it is possible. To do this you will need to have your options for the validation plugin setup in a similar manner.
rules: {
cmp_email: {
minlength: 5,
required: true,
email: true,
remote: {
url: "\/client\/check-email",
type: "post"
}
},
},
messages: {
cmp_email: {
remote: "This email already exist"
}
}
errorClass:"alert-error"
Related
How can I change the default require message in Jquery validation plugin. I have tried the following, but it still prints the default message:
$("#form1").validate({
ignore: [],
debug: false,
rules: {
firstName: {
required: true,
minlength: 2,
maxlength: 200
}
message: {
firstName:{
required: "Custom error message."
}
}
}
});
});
UPDATE
I change my message into messages
messages: {
firstName:"Custom error message."
}
$("#form1").validate({
ignore: [],
debug: false,
rules: {
firstName: {
required: true,
minlength: 2,
maxlength: 200
},
messages: {
firstName:{
required: "Firstname required",
minlength: "Min length is 2",
maxlength: "Max length is 200",
}
}
}
});
Here I am using jQuery validation. It is working fine, after fill all form fields I want do Ajax call but I am not able to do that. I am getting error. How can I do?
jQuery(document).ready(function(){
jQuery("#SubmitForm").validate({
rules: {
"address": {
required: true
},
"username": {
required: true
},
"mobileNumber": {
required: true,
number: true,
minlength : 12
},
"userEmailid": {
required: true,
email: true
},
"message": {
required: true
}
},
messages: {
"address": {
required: "Please enter your Location."
},
"username": {
required: "Please enter your Fullname."
},
"mobileNumber": {
required: "Please enter your Mobile Number."
},
"userEmailid": {
required: "Please enter your Email.",
email: "Please enter valid Email."
},
"message": {
required: "Please enter Message."
}
},
/* jQuery.ajax({
type:'POST',
url :"php/submit_hitachiForm.php",
data: jQuery('form#SubmitForm').serialize(),
cache: false,
contentType: false,
processData: false,
success: function(data) {
console.log(data);
if(data == "success"){
$("#success_message").show();
$("#success_message").fadeOut(4000);
}
},
error:function(exception){
alert('Exeption:'+exception);
}
}); */
});
});
Put all the validation:
$('#SubmitForm).validate({
// validation rules
});
and after that initialize the validation function like:
if($('#SubmitForm).valid())
{
// make ajax() call here
}
Try this in your code
submitHandler: function() {
/*ajax request*/
}
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 .
I'm making a simple javascript form with validation. I've already planned my sintax and everything but I need help with two things:
I've templating my JS to output the error, but how can I change the inputbox color to "green" for example if the input is OK by validation?
My templating error until now:
$.validator.setDefaults(
{
showErrors: function(map, list)
{
this.currentElements.parents('label:first, .controls:first').find('.error').remove();
this.currentElements.parents('.control-group:first').removeClass('error');
$.each(list, function(index, error)
{
var ee = $(error.element);
var eep = ee.parents('label:first').length ? ee.parents('label:first') : ee.parents('.controls:first');
ee.parents('.control-group:first').addClass('error');
eep.find('.error').remove();
eep.append('<p class="error help-block"><span class="help-block error">' + error.message + '</span></p>');
});
//refreshScrollers();
}
});
Can you help me inserting the function to change the color if it's OK? I just can't figure it out.
Other thing is about showing a "loading" image while javascript is remotly checking if the user / email exists. I have everything ready and work, but I can't and don't know how to show a loading image while it checks ( before give error result ), neither tells the result is OK ( only in those fields ). My remote function:
$(function()
{
// validate signup form on keyup and submit
$("#registerform").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 3,
remote:{
url: "inc/core/check_user.php",
type: "post",
data: {
username: function(){
return $( "#username" ).val();
}
}
}
},
password: {
required: true,
minlength: 5
},
confpassword: {
required: true,
minlength: 5,
equalTo: "#password"
},
scode: {
required: true,
minlength: 4,
maxlength: 6,
digits: true
},
scodeconf: {
required: true,
minlength: 4,
maxlength: 6,
digits: true,
equalTo: "#scode"
},
email: {
required: true,
email: true,
remote:{
url: "inc/core/check_email.php",
type: "post",
data: {
email: function(){
return $( "#email" ).val();
}
}
}
},
topic: {
required: "#newsletter:checked",
minlength: 2
},
agree: "required",
address: "required",
zipcode: "required",
city: "required",
state: "required",
country: "required",
data: "required",
age: "required"
},
messages: {
firstname: $lang['register_jquery_pnome'],
lastname: $lang['register_jquery_unome'],
username: {
required: $lang['register_jquery_username'],
minlength: $lang['register_jquery_username_min'],
remote: $lang['register_jquery_username_registado'],
},
password: {
required: $lang['register_jquery_password'],
minlength: $lang['register_jquery_password_min']
},
confpassword: {
required: $lang['register_jquery_password'],
minlength: $lang['register_jquery_password_min'],
equalTo: $lang['register_jquery_password_equalto']
},
email:{
required: $lang['register_jquery_email_valido'],
remote: $lang['register_jquery_email_registado']
},
agree: $lang['register_jquery_tos'],
address: $lang['register_jquery_morada'],
zipcode: $lang['register_jquery_zipcode'],
city: $lang['register_jquery_city'],
state: $lang['register_jquery_state'],
country: $lang['register_jquery_pais'],
data: $lang['register_jquery_data'],
age: $lang['register_jquery_age'],
scode: {
required: $lang['register_jquery_codigoseguranca'],
minlength: $lang['register_jquery_codigoseguranca_min'],
maxlenght: $lang['register_jquery_codigoseguranca_max'],
digits: $lang['register_jquery_codigoseguranca_digits']
},
scodeconf: {
required: $lang['register_jquery_codigoseguranca'],
minlength: $lang['register_jquery_codigoseguranca_min'],
maxlenght: $lang['register_jquery_codigoseguranca_max'],
digits: $lang['register_jquery_codigoseguranca_digits'],
equalTo: $lang['register_jquery_codigoseguranca_equalto']
},
}
});
});
Could someone help me with those two things? Thanks in advance!
For changing the color of valid elements you can add a class to them by adding the following to your validate function:
$("#registerform").validate({
validClass: "success",
// your code
});
Then style your success class: .success {background-color: green}
The remote option is just a normal jQuery.ajax() call so you can use all the same settings.
Should be something like this:
remote:{
url: "inc/core/check_user.php",
beforeSend: function( xhr ) {
//your code to show a message
},
type: "post",
data: {
username: function(){
return $( "#username" ).val();
}
},
complete: function() {
// your code to hide the message
}
}
below is my code the validation only works without the remote validation. once i include remote validation, it submit the form without completing all the other form validations?
$(document).ready(function() {
$("#form1").validate({
rules: {
firstName: "required",// simple rule, converted to {required:true}
lastName: "required",
email: {// compound rule
required: true,
email: true,
success: "valid",
remote: "checkAddress.php"
},
password: {
required: true,
success: "valid",
minlength: 5
},
verify: {
required: true,
success: "valid",
minlength: 5,
equalTo: "#password"
},
address1: "required",
city: "required",
province: "required",
dob: {
required: true,
date: true,
success: "valid"
},
captcha_code: {
required: true,
captcha_code: true,
remote: "checkCaptcha.php"
}
},
messages: {
email:{
remote: "This email is already registered! One registration per email address."
},
captcha_code:{
remote: "Enter the right captcha value!."
}
},
onsubmit: true
});
});
What I was asking was if you have implemented captcha_code as a method? in captcha_code: true,.
captcha_code: {
required: true,
captcha_code: true,
remote: "checkCaptcha.php"
}
Like this
jQuery.validator.addMethod("captcha_code", function(value, element) {
return (this.optional(element) || /* do something */ );
}, "");
I found this captcha demo and it has no captcha_code as method, only required and remote. So I was thinking if you have implemented it.
Here is the script from the demo. http://jquery.bassistance.de/validate/demo/captcha/
$(function(){
$("#refreshimg").click(function(){
$.post('newsession.php');
$("#captchaimage").load('image_req.php');
return false;
});
$("#captchaform").validate({
rules: {
captcha: {
required: true,
remote: "process.php"
}
},
messages: {
captcha: "Correct captcha is required. Click the captcha to generate a new one"
},
submitHandler: function() {
alert("Correct captcha!");
},
success: function(label) {
label.addClass("valid").text("Valid captcha!")
},
onkeyup: false
});
});
The remote URL is hit passing in the value of the field to which it’s expecting a JSON TRUE/FALSE in return, are you in this one?
so i changed:
email: {// compound rule
required: true,
email: true,
success: "valid",
remote: "checkAddress.php"
},
captcha_code: {
required: true,
captcha_code: true,
remote: "checkCaptcha.php"
}
to
email: {// compound rule
required: true,
remote: "checkAddress.php"
},
captcha_code: {
required: true,
remote: "checkCaptcha.php"
}
it works great, wow, you guys rock!!!