javascript - 提交表单时检测必填字段的名称且未验证

Question

我在 html5 中创建一个表单，如下例所示:

<form action="/my/url/insert.php" method="POST">
     <div class="row"> 
          name <input name="name" required/> 
     </div>
     <div class="row"> 
          type <input name="type" required/> 
     </div>
     <div class="row"> 
          year <input name="year" required/> 
     </div>

     ....

     <div class="row"> 
          album <input name="album" required/> 
     </div>
     <div class="row"> 
          <input type="submit" value="Save"/>
     </div>
</form>


<script>
    $('form').submit(function(){
         console.log('test');
    });
</script>

问题:

我想检测提交和记录时未验证的必填字段的名称。

例如:如果我在提交时没有填写输入“相册”，我会在消息“需要一个字段...”之前检测到它

有办法做到这一点吗？

谢谢。

Answer 1

开始吧.. 循环遍历每个 input:required 字段并使用 .attr 获取其名称。

$('form').submit(function(e) {
  e.preventDefault();
  $(this).find('input:required').each(function(){
    console.log($(this).attr('name'));  
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/my/url/insert.php" method="POST">
  <div class="row">
    name
    <input name="name" required/>
  </div>
  <div class="row">
    type
    <input name="type" required/>
  </div>
  <div class="row">
    year
    <input name="year" required/>
  </div>

  ....

  <div class="row">
    album
    <input name="album" required/>
  </div>
  <div class="row">
    <input type="submit" value="Save" />
  </div>
</form>

<小时/>

已更新

$('form').submit(function(e) {
  e.preventDefault();
  $(this).find('input:required').each(function(){
    if($(this).val()==""){ //check if its empty
      console.log($(this).attr('name'));  
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form novalidate action="/my/url/insert.php" method="POST">
  <div class="row">
    name
    <input name="name" required/>
  </div>
  <div class="row">
    type
    <input name="type" required/>
  </div>
  <div class="row">
    year
    <input name="year" required/>
  </div>

  ....

  <div class="row">
    album
    <input name="album" required/>
  </div>
  <div class="row">
    <input type="submit" value="Save" />
  </div>
</form>

假设只有 required 是用于验证的属性，则上述条件将成立，是的，默认情况下，当您说 required 时，浏览器将使其验证抑制您编写的验证。如果您希望验证正常工作，请将 novalidate 添加到 form，如上面评论之一所述。