CODEWITHSUNDEEP
jqueryformsfunctionelementvalidating
user2854865
user2854865

Reputation: 65

Validate Form Element in one function in jquery

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?

Upvotes: 0

Views: 132

Answers (2)

Anthony Grist
Anthony Grist

Reputation: 38345

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");
}

Upvotes: 1

Devang Rathod
Devang Rathod

Reputation: 6736

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

Replace

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

With

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

Upvotes: 0

Related Questions