问题：

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获取其名称。

＆＃13;

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

＆＃13;

<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>

＆＃13;

<强>更新

＆＃13;

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

＆＃13;

<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>

＆＃13;

假设只有必需将是验证的属性，上述条件将保持良好，是的，默认情况下，当您说需要时，浏览器将具有您编写的验证抑制验证。如果您希望验证有效，请将novalidate添加到form，如上面其中一条评论所述。

Answer 2

按属性required选择它们：

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

自己做一个简单的必要检查，做一个简单的“非空”状态。但为此，您的表单需要novalidate类，否则将不会触发submit回调，也不会发生任何事情。

$(function() {
    $('form').submit(function(){
        $("input:required", $(this)).each(function() {
            if( $(this).val() != "" )
                console.log($(this).attr("name"));
        });
    });
});

此处的完整示例：https://jsfiddle.net/vvdh66rb/

Answer 3

你也可以这样做：

getSupportFragmentManager()

检测所需字段的名称，并在提交表单时不进行验证

问题：

3 个答案: