如何知道是否触发了必填字段验证？ [复制]

Question

我有一个包含很多字段的大表单，其中大部分是必填字段。所以我想显示弹出警报消息说请填写必填字段。

 <input name="fname" id="fname" type="text" class="form-control" required>

我也在该特定字段下方显示通常的消息， 我需要提交点击之类的东西

 If (some fields required field error got triggered )
      {
       show alert pop-up message ;
      }

我是这个东西的新手所以..

Answer 1

function checkEmpty()
{
    var fname = document.getElementById('fname').value;

    if(!fname)
    {
        alert('Field is empty')
    }
}

<form onsubmit='checkEmpty'>
<!--Form contents-->
</form>

使用 javscript 的验证很容易被绕过，因为它发生在客户端。

Answer 2

试试这个

<form onsubmit="myFunction()">
<input name="fname" id="fname" type="text" class="form-control" required>
<form>

使用以下函数检查字段

function myFunction() {
var fname=document.getElementById('fname').value;
if(!fname)
{
    alert("please fill required field");
}
}

您可以通过输入 || 来检查 if 条件中的多个字段标志。例如，您有 2 个提交的 fname 和 lname。您可以通过 if(!fname || !name) 进行检查

Answer 3

您需要在每个必填字段下方显示整体警报以及个别错误消息。

使用 jQuery 来做到这一点，

    <form>
    <input name="fname" id="fname" type="text" class="form-control validateclass" required>
    <span class="spnError"></span>
    <input name="lname" id="lname" type="text" class="form-control validateclass" required>
    <span class="spnError"></span>
    <input id="btnClick" type="button" value="Submit Form"/>
    </form>


    <script type="text/javascript">
        $(function () {
         $("#btnClick").click(function()
         {
          $(".validateclass").each(function() {
          var fieldValue =$(this).val();
          if(fieldValue == null || fieldValue == "")
          {             
            $(this).next().css( "color", "red" ).text("Field is required");    
          }
          else
          {
           $(this).next().text(""); 
          }
        });
     });                        
   });
  </script>