Question

使用带有required属性的html5表单验证。

单击提交按钮时，我只想验证，而不是提交表单。

<input type="submit" id="calculate">

<script>
    $("#calculate").click(function(e) {
        e.preventDefault(); // prevents validation

        // do something else with form data
    }
</script>

Answer 1

要触发表单html5验证，您可以使用

$('#myForm')[0].checkValidity();


<script>
    $("#calculate").click(function(e) {
        e.preventDefault(); // prevents form submission

        $("#form")[0].checkValidity();
    }
</script>

Answer 2

可以使用HealthKit代替button来完成，因为：

input

使用JavaScript验证提交表单，如下：

<button type="button" id="submitButton">Submit</button>

如果您不想提交，只需删除$('#submitButton').click(function() { //Validate form if(formValidated()) { $('#formId').submit (); } });。

Answer 3

就像一个想法/演示，这里是一种不使用必需属性进行验证的方法 - 它可以让您更好地控制验证过程，并且您可以看到它非常简单。

首先创建一个包含要检查的所有输入字段的ID的数组。 （你可以拥有必须以相同方式评估的类似字段的组...输入字段的一个数组/ for-loop，复选框的另一个数组，文本字段的另一个等等）

当return false;表单提交中止时。

＆＃13;

var arr = ['em','fn','ln'];
$('#myForm').submit(function(){
  for (var n=0; n<arr.length; n++){
     $('#'+arr[n]).removeClass('errorField');
     if ( arr[n] == 'em'){
        if  ( $('#'+arr[n]).val() == 'Bob' ){
           //eval email field differently
           alert('Hi Bob - you cannot complete this form');
           return false; //error condition, so abort submit
        }
     }else if ( $('#'+arr[n]).val() == ''){
        $('#'+arr[n]).addClass('errorField').focus();
        return false; //error condition, so abort submit
     }
  }

  alert("Form will now submit"); return false; //FOR DEMO ONLY
  //Submit continues
});

＆＃13;

.errorField{background:yellow;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form id="myForm" action="process.php" method="post" >
  First Name: <input type="text" id="fn" name="fn" /><br>
  Last Name: <input type="text" id="ln" name="ln" /><br>
  Non-Required: <input type="text" id="nr" name="nr" /><br>
  Email: <input type="text" id="em" name="em"  /><br>
  <input type="submit" id="mybutt" value="Submit" /><br>
</form>

＆＃13;

验证表单并阻止提交

3 个答案: