如何在没有 jQuery 验证插件且没有提交按钮的情况下在 JavaScript 中验证表单

Question

我有这个 html 表单，我想在用户按下 #btnPopup 时验证这个表单，这个按钮不是提交按钮。在单击按钮上，如何在不使用 jQuery 验证插件的情况下做到这一点？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frmUsers" data-userid="">
  <img id="btnClose" src="resources/img/close_window.png">
  <h2 id="popupTitle"></h2>
  <ul>
    <li>
      <label for="username">Username:</label>
      <input type="text" id="username" name="txtUsername" placeholder="Please select username" required/>
    </li>
    <li>
      <label for="level">Level:</label>
      <input type="number" id="level" name="txtLevel" placeholder="Please select level" required/>
    </li>
    <li>
      <label for="registrationStatus">RegistrationStatus:</label>
      <select name="txtRegistrationStatus" id="registrationStatus" placeholder="Please select registration status" class="required">
        <option value="Registered">Registered</option>
        <option value="Unregistered">Unregistered</option>
      </select>
    </li>
    <li>
      <label for="registrationDate">RegistrationDate:</label>
      <input type="text" id="registrationDate" name="txtRegistrationDate" placeholder="Please select date" required/>
    </li>

    <div class="btnZone">
      <input class="btnDown" type="button" value=" " id="btnPopup" />
      <input class="btnDown" type="button" value="Cancel" id="btnCancel">
    </div>
  </ul>
</form>

Answer 1

您可以通过在参数中发送表单输入来使用 ajax 来实现您想要的并将事件附加到您的按钮。

$('#btnPopup').on('click', function(){

    // Fields validation

    if( validation ){
        $.ajax({
            method: "POST",
            url: "your_url",
            dataType: 'json',
            data: {
                'username' : $('#username').val(),
                'level' : $('#level').val()
                ...
            }
        })
        .done(function( result ) {
            // Do something
        })
        .fail(function(result, textStatus) {
            // Do something when error happened
        });

    }else{
        // Do something when your validations are bad.
    }

});

不要忘记验证您的参数服务器端。验证客户端可以轻松通过。之后，您可以在 ajax 成功回调中获取服务器响应

Answer 2

您可以通过在“#btnPopup”上附加一个“Click”侦听器并在其中添加一个简单的提交来提交您的表单：

var myButton = document.getElementById("btnPopup");
myButton.addEventListener("click" , function(){
    /*
        --Your Validation logic goes here--
    */

    // You submit the Form when the Validation is over.
    document.getElementById("frmUsers").submit();
});

现在您可以根据要验证表单的内容编写自己的验证函数。一个非常简单且非常基本的验证将是创建一个通用函数并通过一个来验证每个字段，如下所示：

function validate(inputField){
  var myInputField = document.forms["frmUsers"][inputField].value;

  // Add some simple Validation Rules 
  if(myInputField == null || myInputField == ""){
    // Do Something if validation fails [Eg: alert('error!!!');]
    return false;
  }
}

你可以像这样使用上面的函数：

validate("txtUsername");

您显然可以创建一个循环并通过表单中的每个字段并对其进行验证。通常有很多方法可以验证 Form ，不过上面的例子会让你走上正轨。

重要提示：这是一个客户端验证。请记住，在 100 种情况下，您确实需要配置 99 种情况下的服务器端验证。客户端验证并非 100% 安全。

Answer 3

是的，你可以做到。下面是示例代码，您可以 tweek 和使用

function validateForm() {
    var x = document.forms["frmUsers"]["registrationDate"].value;
    if (x == null || x == "") {
        alert("Registration date must be filled out");
        return false;
    }
}

<input class="btnDown" type="button" value=" " id="btnPopup" onclick="return validateForm();/>