如何使 html5 所需的验证器与输入类型 = 按钮一起工作？答案

【问题标题】：How to make html5 required validator work with input type=button?如何使 html5 所需的验证器与输入类型 = 按钮一起工作？
【发布时间】：2016-12-06 11:19:53
【问题描述】：

正如html5 required validator not working with input type=button 中提到的，如果表单按钮类型是按钮而不是提交，则 html5 验证不起作用。即使在这种情况下，有没有办法让 html5 验证工作？

【问题讨论】：

stackoverflow.com/questions/16707743/…

标签： jquery html

【解决方案1】：

HTML5 表单验证过程仅限于通过提交按钮提交表单的情况。表单提交算法明确表示通过 submit() 方法提交表单时不执行验证。显然，这个想法是，如果您通过 JavaScript 提交表单，则应该进行验证。

但是，您可以使用 checkValidity() 方法针对 HTML5 属性定义的约束请求（静态）表单验证。如果您想显示与浏览器在 HTML5 表单验证中相同的错误消息，恐怕您需要检查所有受约束的字段，因为validityMessage 属性是字段（控件）的属性，而不是表单.在单个受约束字段的情况下，正如所展示的那样，这当然是微不足道的：

function   submitform() 
{
      var f = document.getElementsByTagName('form')[0];
      if(f.checkValidity()) 
      {
          f.submit();
      } 
      else 
      {
          alert(document.getElementById('example').validationMessage);
      }
}

【讨论】：

【解决方案2】：

我已经向您展示了一种使用 html5 的简单验证技术。

<!DOCTYPE html>
<html>
<body>

<form action="#" autocomplete="on">
  First name:<input type="text" name="fname" required><br>
  Last name: <input type="text" name="lname" required><br>
  E-mail: <input type="email" name="email"autocomplete="off"  required ><br>
  <input type="submit">
</form>



</body>
</html>

使用 Javascript 验证

<html>
<head>
<title>Form</title>
<script type="text/javascript">
function validate()
{
    if(document.getElementById('fname').value=='')
        {
        alert('Please fill up the first name!! ');
        document.getElementById("fname").style.borderColor="red";
        document.getElementById("fname").style.backgroundColor="yellow";
        document.getElementById("fname").style.borderWidth=2;
        return false;
        }
    else if (document.getElementById('email').value=='')  
     {  
        alert('Please provide valid email address !!');
        document.getElementById("email").style.borderColor="red";
        document.getElementById("email").style.backgroundColor="yellow";
        document.getElementById("email").style.borderWidth=2;
       return false;  
     } 
    else if (document.getElementById('phone').value=='')
        {
        alert('Please provide phone no');
        document.getElementById("phone").style.borderColor="red";
        document.getElementById("phone").style.backgroundColor="yellow";
        document.getElementById("phone").style.borderWidth=2;
        return false;
        }
    else if (document.getElementById('day').value=='')
        {
        alert('Please provide date for D.O.B');
        document.getElementById("day").style.borderColor="red";
        document.getElementById("day").style.backgroundColor="yellow";
        document.getElementById("day").style.borderWidth=2;
        return false;
        }
    else if (document.getElementById('month').value=='')
        {
        alert('Please provide month for D.O.B');
        document.getElementById("month").style.borderColor="red";
        document.getElementById("month").style.backgroundColor="yellow";
        document.getElementById("month").style.borderWidth=2;
        return false;
        }
    else if (document.getElementById('year').value=='')
    {
        alert('Please provide year for D.O.B');
        document.getElementById("year").style.borderColor="red";
        document.getElementById("year").style.backgroundColor="yellow";
        document.getElementById("year").style.borderWidth=2;
        return false;
    }
    else if(document.getElementById("city").value=="-1")
    {
        alert('Please select a city');
        return false;
    }


    else
        {
        confirm('Do you want to save the form ??');
        }

}
</script>

</head>
<body bgcolor="#FFCCCC">
<h1><b><i><u>Registration Form</u></i></b></h1>

<form name="form1"  method="post">
<table align="centre" bgcolor="#00FF00">
<tr>
    <td>Full Name:</td>
    <td><input type="text" id ="fname" name="fname" size="30"required placeholder="This field is Mandatory"></td>

</tr>
<tr>
    <td>Email:</td>
    <td><input type="email" id="email" name="email" size="30"required placeholder="Enter a valid Email Address"></td>

</tr>
<tr>
    <td>Phone No.:</td>
    <td><input type="number" id="phone"  size="30" name="phone" required ></td>

</tr>
<tr>
    <td>Date of Birth:
    Day
    <td><input type="number" name="day" id='day' min="1" max="31" value="" required>
    Month
    <input type="number" name="month" min="1" id='month' max="12" value="" required>
    Year
    <input type="number" name="year" min="1950" id='year'max="2020" value="" required>

</tr>
<tr>
    <td>City:</td>
    <td>
        <select id="city">
            <option value="-1">-~Select One~-</option>
            <option>KOLKATA</option>
            <option>DELHI</option>
            <option>MUMBAI</option>
            <option>CHENNAI</option>
            <option>BANGALORE</option>
        </select>
    </td>


</tr>
<tr>
    <td><input type="submit" value="Login" onclick="return(validate());"></td>
</tr>
<hr>

</table>
</form>

</body>
</html>

希望对你有帮助

【讨论】：

【解决方案3】：

我不知道你为什么把它标记为“jQuery”。

你可以用 Javascript 解决这个问题，当你点击一个按钮时检测输入是否为空：

...
if (document.getElementById("InputID").value == "") {
    // It's empty
} else {
    // It's not empty
}
...

【讨论】：

你可以用 Jquery 做的一切都可以用 Vanilla javascript。他可能已经标记了它，因为他想要一个 Jquery 解决方案。