【问题标题】：Detect the name of required field and not validated when submit a form检测必填字段的名称，提交表单时未验证
【发布时间】：2016-06-23 11:03:25
【问题描述】：

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

问题：

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

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

有没有办法做到这一点？

谢谢。

【问题讨论】：

使用:required选择器
哪个必填字段？你有几个。
@Utkanos:只有未验证的输入
如果您不想形成验证，请在您的form 中使用novalidate 属性。
如果有任何未经验证的输入，submit 将永远不会被触发。所以你的问题是没有用的。给我们一些你想在哪里使用它的例子。否则循环所有输入，看看女巫不是空的。

标签： javascript jquery html forms form-submit

【解决方案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，如上述 cmets 之一所述。

【讨论】：

感谢您的回答。但我只搜索未验证的输入
Git 内部选择器上下文，以防止获取表单之外的元素。 $('input:required', $(this)) 或 $(this).find('input:required').
@GuruprasadRao ：我对其进行了测试，但在我填写所有必需的输入之前，从未调用过提交。

【解决方案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/

【讨论】：

【解决方案3】：

你也可以这样做：

<form action="/my/url/insert.php" method="POST" onSubmit="return myFunction()">
 <div class="row"> 
      <!--I am only giving id to one to show an exmaple you can give to differnt-->
      name <input name="name" id="some" 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>
 function myFunction() {
 var x = document.getElementById('some').value;
   if (x == "" || x == null) {
   alert('sadsd');
   return false;
   //You can give anything else than alert
   }
 }

【讨论】：