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
}
}
Related
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*/
}
using following function for validating but cant be work fine in first time but work fine in second time.
second function is used for validator and its not working fine when i first click the button but its work fine second time please help.
function saveValue(){
if (validateFormset().form()) { // validation perform
$('form#vendorActionForm').attr({methos: 'POST'});
$('form#vendorActionForm').attr({action: 'vendorAddressCreateUpdate.htm'});
$('form#vendorActionForm').submit();
}else{
$(".textMessgeClass").text("Please fill the highlighted field/s");
$(".textMessgeClass").addClass('errorClass');
$(".textMessgeClass").fadeIn("slow");
$(".textMessgeClass").delay(2000).fadeOut(2000);
}
}
function validateFormset(){
var validator = $("#vendorActionForm").validate({
rules: {
accountType: {
required:true
},
addressRank: {
required:true
},
street: {
required:true
},
city: {
required:true
},
state: {
required: true,
accept: "[a-zA-Z]+",
minlength: 2
},
region: {
required: true
},
zipCode: {
required: true,
rangelength: [3, 5]
},
contactName: {
required: true
},
mobile: {
required: false,
number: true,
minlength: 10
},
email: {
required: true,
email: true
},
email2: {
required: false,
email: true
},
email3: {
required: false,
email: true
}
},
errorPlacement: function(error, element) {
$(element).filter(':not(.valid)').addClass("addressErrorClass");
},
success: function(error) {
$("#vendorActionForm").find('.valid').removeClass("addressErrorClass");
}
});
alert('AAAA');
alert(validator);
return validator;
}
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"
I am developing a web application and i have used jquery validation as :
$("#register").validate({
rules: {
emailID: {
required: true,
email: true
},
pass: {
required: true,
minlength: 6
},
user_email: {
required: true,
email: true
},
user_pass: {
required: true,
minlength: 6
}
}
everything is working but the problem is as object emailID and user_email both are having the same data also same for pass and user_pass, how can i line them in one without changing my name attribute in html, something like this :
$("#register").validate({
rules: {
emailID, user_email:
{
required: true,
email : true
}
}
i know this structure is not correct.
and as i am having lots of objects having same data, so it doesnt seems to be good doing the repetition
function RequiredRule( email, minlength ) {
this.email = email;
this.minlength = minlength;
this.required = true;
}
$("#register").validate({
rules: {
emailID: new RequiredRule(true),
pass: new RequiredRule(false, 6),
user_email: new RequiredRule(true),
user_pass: new RequiredRule(false, 6)
}
});
var one = {
required: true,
email: true
},
two = {
required: true,
minlength: 6
};
$("#register").validate({
rules: {
emailID: one,
pass: two,
user_email: one,
user_pass: two
}
});
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!!!