JavaScript表单验证函数: Looping each item

Question

我有一个表单输入元素列表，我想在其中运行循环。根据结果​​，我需要运行一些条件语句，以便我可以使用它们的名称属性来验证它们。我为此使用了 jQuery，并使用 .each 方法来循环它们。因此，我可以向无效的输入元素添加/删除类名。

用语言来描述并不困难。但下面的代码块是有意义的:

JSFiddle

function formValid() {
  var valid = true;

  $('form input').each(function() {
    if ($(this).val() == '') {
      valid = false;
      $(this).addClass('red-border');
    } else if (true /* if "tel" is not a number */ ) { // <- here I want to validate using input name attribute
      valid = false;
      $(this).addClass('red-border');
    } else {
      $(this).removeClass('red-border');
    }
  });

  return valid;
}

$('form').on('submit', function(event) {
  event.preventDefault();

  if (formValid()) {
    alert('Yay!');
  }
});

.red-border {
  border-color: red !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">

  <p>
    <input type="text" name="name">
  </p>
  <p>
    <input type="text" name="tel">
  </p>
  <p>
    <input type="text" name="email">
  </p>

  <p>
    <button type="submit">Submit</button>
  </p>

</form>

Answer 1

看看 fiddle https://jsfiddle.net/t9ayvken/

CSS:

.red-border {
  border-color: red;
}

HTML:

<form action="#">

  <p>
    <input class="must-validate" type="text" name="name">
  </p>
  <p>
    <input class="must-validate" type="text" name="tel">
  </p>
  <p>
    <input class="must-validate" type="text" name="email">
  </p>

  <p>
    <button type="submit">Submit</button>
  </p>

</form>

JQuery:

/*validation functions for each input type*/
function validateName(event){
    var $this = $(this);
  /* validation is done here */
  if(false){
   $this.removeClass('red-border');
  }
  else {
    /* not valid*/  
    $this.addClass('red-border');
  }
}
function validateTel(event){

}
function validateEmail(event){

}

/*add validation event handlers*/
$(document).on('validate','[name="name"]',validateName);
$(document).on('validate','[name="tel"]',validateTel);
$(document).on('validate','[name="email"]',validateEmail);


function formValid() {
    var valid = true;

  /*Trigger validation events for all required inputs*/
  $('input.must-validate').trigger('validate');


 /* After validation is complete check to see if any are invalid */      
  if( $('input.must-validate.red-border').length ){
    alert('the form is invalid');
    valid = false;
  } 

  return false;
  //return valid;
}

$('form').on('submit', function(event) {
    event.preventDefault();

  if ( formValid() ) {
    alert('Yay!');
  }
});