Validate Form Element in one function in jquery

Question

var client_name     = $("#client_name");
var client_surname  = $("#client_surname");
var client_phone    = $("#client_phone");
var form            = $("#billing_form");

Validate(client_name);
Validate(client_surname);
Validate(client_phone);

form.submit(function(e){
  if(Validate(client_name) && Validate(client_surname) && Validate(client_phone)){
     e.preventDefault();
     console.log("True");
     return true;
 } else {
     console.log("False");
     return false;  
 }
});

function Validate(id){
 id.blur(function(){
  if(id.val().length <= 0){
     id.addClass("input_error").removeClass("input_apply").css("border","1px solid #ff0000");
     return false;
} else {
     id.removeClass("input_error").removeAttr("style");
     return true;
       }
   });
}

I wrote this function for validating all of my inputs in one function but it does not return true any time.İf I fill all of the inputs it returns false again. Anyone can help me?

Anthony Grist · Answer 1 · 2013-03-22T11:18:43.803

Your Validate function doesn't return anything. That's pretty evident from the fact that there's no return statement inside that function. All it does is bind a blur event handler on the element that's passed to it; the handler function for that event returns true or false, but that has absolutely no bearing on the Validate function.

I would suspect a lack of return inside a function implicitly results in undefined being returned, which in turn evaluates to false for boolean conditions, which is why you're never seeing true (because it never is). Just take out the event handler binding in your Validate function:

function Validate(id) {
    if (id.val().length <= 0) {
        id.addClass("input_error").removeClass("input_apply").css("border", "1px solid #ff0000");
        return false;
    } else {
        id.removeClass("input_error").removeAttr("style");
        return true;
    }
}

It won't do the validation as you're modifying the inputs values, but it should correctly validate them when you submit the form.

If you want to keep the blur event handler, then you could do it this way:

var client_name     = $("#client_name");
var client_surname  = $("#client_surname");
var client_phone    = $("#client_phone");
var form            = $("#billing_form");

function blurValidation() {
    var $this = $(this);
    if(this.value.length <= 0) {
        $this.addClass("input_error").removeClass("input_apply").css("border","1px solid #ff0000");
        return false;
    }
    else {
        $this.removeClass("input_error").removeAttr("style");
        return true;
    }
}

client_name.blur(blurValidation);
client_surname.blur(blurValidation);
client_phone.blur(blurValidation);


form.submit(function(e){
    client_name.blur();
    client_surname.blur();
    client_phone.blur();
    if(Validate(client_name) && Validate(client_surname) && Validate(client_phone)){
        e.preventDefault();
        console.log("True");
        return true;
    } else {
        console.log("False");
        return false;  
    }
});

function Validate(id){
    return !id.hasClass("input_error");
}

How will I catch the "blur" function of an element if I write it so? — user2854865, Mar 22 '13 at 10:17
@Onur If you're that attached to the `blur` event handler, set that up separately (not inside the `Validate` method) and simply check for the presence of the `input_error` class inside the `Validate` method instead (it fails if that class is present). — Anthony Grist, Mar 22 '13 at 10:30
this worked but it has a bug. If I don't fill anything it returns True because of any element has class input_error :(( — user2854865, Mar 22 '13 at 11:16
@Onur Edited to programmatically trigger the `blur` event on the three inputs when the form is submitted, so it will pick up the cases where some of them haven't been interacted with at all. — Anthony Grist, Mar 22 '13 at 11:19
thank you Anthony I want to ask you something another. I have an email input. How will I test the email if it is real or not with these codes? — user2854865, Mar 22 '13 at 12:23

Devang Rathod · Answer 2 · 2013-03-22T10:03:27.253

0

Instead of this $("#client_name") use $("#client_name").val();

Replace

if (id.val().length <= 0) {

With

if (id.val() == "") {

edited Mar 22 '13 at 10:03

answered Mar 22 '13 at 09:56

Devang Rathod

6,650
2
23
32

but I say in the function id.val() already. Does this have any differences Devang? – user2854865 Mar 22 '13 at 09:59
ohh i didnt see that . ok no prob but now check my edited answer. – Devang Rathod Mar 22 '13 at 10:04

Validate Form Element in one function in jquery

2 Answers2