Question

如html5 required validator not working with input type=button中所述，如果表单按钮类型为按钮，则html5验证不起作用，而不是提交。反正是否在这种情况下使html5验证工作？

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

Answer 2

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

您可以使用Javascript解决此问题，方法是在单击按钮时检测输入是否为空：

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

Answer 3

我已经向您展示了使用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>

希望它能帮到你

如何使用输入类型=按钮使html5必需的验证器工作？

3 个答案: