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

<script>  
function validateform(){  
var user_name=document.myform.user_name.value;  
var user_address=document.myform.user_address.value;  
  
if (user_name==null || user_name==""){  
  alert("User Name can't be blank");  
  return false;  
} 
if (user_address==null || user_address==""){  
  alert("User Address can't be blank");  
  return false;  
} 
}
</script>

更多信息：How To Validate Form In Javascript?

Answer 2

您可以通过在参数中发送表单输入来使用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 3

您可以附上＆＃34;点击＆＃34;你的＆＃34;＃btnPopup＆＃34;并在其中添加一个简单的提交：

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");

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

重要提示：但这是客户端验证。请记住，在100个中的99个案例中，您确实需要配置服务器端验证。客户端验证不是100％安全的。

Answer 4

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

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();/>

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

4 个答案: