Question

我需要验证填充的输入，如果所有输入都是有效的，则显示加载动画，直到显示下一页。我可以逐个检查验证，但不知道如何将它们全部收集在一起。也许有更简单的方法来检查输入验证？此外，我在下面的代码中的输入内做了所有验证。 这是我的输入类型，我需要验证并在成功时显示加载动画，直到页面刷新到另一页：

＆＃13;

<form action="" method="POST" enctype="multipart/form-data" name="formz" >
  <div>
    <label>Name: </label>
    <input type="text" onkeydown="return keyDown.call(this,event)" onchange="value = value.replace(/^\s+/,'')" pattern=".{3,20}" name="name" required>
  </div>
  
  
  <div>
    <label>Surname: </label>
    <input type="text" onkeydown="return keyDown.call(this,event)" onchange="value = value.replace(/^\s+/,'')" pattern=".{3,20}" name="surname" required>
  </div>
  
  
  <div>
    <label>Unic Number: </label>
    <input type="text" onkeydown="return keyDown.call(this,event)" onchange="value = value.replace(/^\s+/,'')" pattern=".{7,7}" maxlength='7' name="unicnumb" required />
  </div>
  <div>
    <label>Select:</label>
    <select name="select" id="select" required>	
    	<OPTION VALUE="0" selected disabled >Select</OPTION>
    	<OPTION VALUE="1">Select1</OPTION>
    	<OPTION VALUE="2">Select2</OPTION>
    </select>
  </div>
  <div>
    <label>phone: </label>
    <input type="text" name="phone" id="phone" placeholder="+XXX(XX) XXX-XX-XX" required>
  </div>
  <div>
    <label for="epoct">E-mail</label>
    <input type="email" pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" class="form-control input-sm" name="epoct" id="epoct" required>
  </div>
  
  <button type="submit" name="button" id="button">Done</button>
</form>

＆＃13;

Answer 1

这是我用jQuery处理连续表单验证的大纲：

$(document).ready(function() {
    $( "#button" ).submit(function( event ) {
        if ( /* validation fails for first form element */ ) {
            // stop form submission
            event.preventDefault();
            // display an error message
            $( "#firstFormFieldId" ).append("<span>Incorrect entry</span>");
            // break out of function to ensure validation continues if and only if this condition is met
            return false;
        }
        if ( /* validation fails for second form element */ ) {
            // stop form submission
            event.preventDefault();
            // display an error message
            $( "#secondFormFieldId" ).append("<span>Incorrect entry</span>");
            // break out of function to ensure validation continues if and only if this condition is met
            return false;
        }
        if ( /* validation fails for third form element */ ) {
            // stop form submission
            event.preventDefault();
            // display an error message
            $( "#thirdFormFieldId" ).append("<span>Incorrect entry</span>");
            // break out of function to ensure validation continues if and only if this condition is met
            return false;
        }
        // ... repeat for as many form fields that need validation

        // if all validation criteria are met, you can deploy loading animation here :)
        /* loading animation goes here */
    });
});

你可能已经想象过这个模板的一些变化。例如，您可以添加空的<span>，而不是附加<span>，以便将错误消息包含在HTML中。如果需要显示错误消息，则使用jQuery将错误消息的文本添加到相应的<span>。实际的实现将取决于你，但这种风格对我来说效果很好。

有效输入并使用动画直到页面加载

1 个答案: