Javascript 提交和聚焦输出时的表格验证

我有一个函数可以验证我在focusout事件上的输入，但是当我提交表单时，我需要再次验证表单，我如何才能做到这一点？如果我尝试这样做：

 $("#formcontato").submit(function(event){
        event.preventDefault();
         if (validar()){
           $.ajax({
               blablablabla
           });
        }
    });

他抛出

input

是

undefined

我需要在提交事件中验证表单，因为用户可以直接单击提交按钮，这样，表单验证功能就不会执行

function validar(input) {
 var valido = false;
  if(input.attr("id") === "email"){
      var filtro = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
      if(filtro.test(input.val())){
          input.css("border-color", "green");
      } else {
          input.css("border-color", "red");
          valido = false;
      }
  }
  else if (input.val()===""){
    input.css("border-color", "red");
    valido = false;
  }
  else if (input.val()!="") {
    input.css("border-color", "green");
  }

  return valido;
}

$("input[type='text'],textarea").focusout(function() {
  validar($(this))
});

---

似乎您的

validar

函数接受一个jQuery集合，该集合包含一个作为参数的for输入字段。根据您尝试的代码实现这一点的一种方法如下：

 $("#formcontato").submit(function(event){
        var input = $(this).find("input[type='text'], textarea");
        event.preventDefault();
         if (validar(input)){
           $.ajax({
               blablablabla
           });
        }
    });

实现最终目标的另一个简单方法是在默认情况下禁用submit按钮。例如：

<input type="submit" class="btn" value="My Input Submit" disabled/>

function validar(input) {
  var valido = true; // lets assume its valid to start with
  if(input.attr("id") === "email"){
      var filtro = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
      if(filtro.test(input.val())){
          input.css('border-color', 'green');
      } else {
          input.css('border-color', 'red');
          valido = false;
      }
  }
  else if (input.val()===''){
    input.css('border-color', 'red');
    valido = false;
  }
  else if (input.val()!='') {
    input.css('border-color', 'green');
  }

  return valido;
}

然后，如果表单有效，则可以在

focusout

事件处理程序中使用返回值来启用按钮，如下所示：

$('input[type="text"],textarea').focusout(function() {
  var isValid = validar($(this));
  if (isValid) {
    $('#formcontato').find('input[type="submit"]').prop('disabled', false);
  }
});   

---

我真的很喜欢第一个选项，但是如果只有一个输入是有效的，我点击提交按钮，他知道每个输入都是有效的，有一种方法可以检查所有输入例如，如果我点击提交按钮，他会检查所有输入，如果无效返回，但如果我只关注我的输入，他只会验证输入。