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

我编写了这个函数来验证我在一个函数中的所有输入，但是它不会在任何时候返回。我会填充它再次返回false的所有输入。有人可以帮帮我吗？

Answer 1

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

Answer 2

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

<强>替换

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

。通过

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

在jquery中的一个函数中验证表单元素

2 个答案: