检测必填字段的名称，但在提交表单时未验证

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>

问题：

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

例如：如果我在提交时没有填写输入 "album"，我会在消息 "a field is required..."

之前检测到它

有办法吗？

谢谢。

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>

假设只需要属性进行验证，上述条件将成立，是的，默认情况下，当您说需要时，浏览器将具有您编写的验证抑制验证。如果您希望验证有效，请按照上面的评论之一将 novalidate 添加到 form..

Answer 2

Select 他们属性 required:

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

要自己进行简单的必需检查，请创建一个简单的 "not empty" 条件。但是为此，您的表单需要 novalidate class，否则 submit 回调将不会被触发并且什么也不会发生。

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

完整示例在这里：https://jsfiddle.net/vvdh66rb/

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

检测必填字段的名称，但在提交表单时未验证

Detect the name of required field and not validated when submit a form

html

javascript

forms

jquery

form-submit

问题：