驗證表單元素在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; 
     } 
    }); 
} 

一個功能我寫此功能驗證我所有的投入在一個功能，但它沒有返回true 任何時候。如果我填這一切再次返回假的輸入。任何人都可以幫助我？

Answer 1

而是這個$("#client_name")使用$("#client_name").val();

的更換

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

隨着

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

Answer 2

你Validate函數不返回任何東西。這很明顯，因爲該函數中沒有return聲明。它所做的就是在傳遞給它的元素上綁定一個blur事件處理程序;該事件的處理函數返回true或false，但這與Validate函數完全沒有關係。

我會懷疑缺乏return函數內部隱含導致undefined返回，這反過來計算結果爲false布爾條件，這就是爲什麼你從來沒有看到true（因爲它永遠不會是）。剛取出的事件處理程序在你的Validate功能結合：

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

你正在修改的輸入值，它不會做驗證，但應正確地驗證他們當你提交表單。

如果你想保持blur事件處理程序，那麼你可以這樣來做：

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