Question

我有一个函数来验证我对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))
});

Answer 1

您的validar函数似乎接受包含输入字段作为参数的jQuery集合。根据代码实现此目的的一种方法是您的尝试可能是这样的：

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

实现最终目标的另一种简单方法是默认禁用提交按钮。例如：

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

如果输入有效，您可以修改validar函数以返回true valido。这样，您可以使用返回值来确定是否应启用提交按钮。例如：

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

关于提交和重点关注的表单验证

1 个答案: