使用对服务器的 Ajax 调用验证表单字段 - 学习 Ajax

Question

我需要使用 Ajax 验证我的表单字段。
我现在拥有的是 javascript 验证。 我想知道是否可以重用我的 javascript 代码并实现 Ajax

html 表单

<form method="post" action="ajax/validation.php" class="ibm-row-form" id="registerform">
        <h2 class="ibm-inner-subhead">Basic registration information</h2>                               
        <p>
               First name: <span class="ibm-required">*</span><br/>
               <input id="firstName" name ="firstName" size="36" type="text" onblur=" validateFirstName();" />
               <span id="errorFName" class="error">First name is required</span>        
        </p>
        <p>                         
               Last name:<span class="ibm-required">*</span><br/>
               <input name="lastName" id="lastName" size="36" type="text" onblur="validateLastName();" />
               <span id="errorLName" class="error">Last name is required</span>
        </p>
        <input id="ibm-submit" name="ibm-submit" class="ibm-btn-arrow-pri" value="Register" type="submit" />
        <input value="Cancel" type="button" name="ibm-cancel" class="ibm-btn-cancel-sec" onclick="window.location(window.location.href = '#')" /> 
</form>

JavaScript 验证（无 Ajax）

function validateFirstName(){
    var fName = document.getElementById("firstName").value;
    if(fName==""){
          errorFName.style.visibility = "visible";
          return false;
    } 
    errorFName.style.visibility = "hidden";
}

function validateLastName(){
    var LName = document.getElementById("lastName").value;
    if(LName==""){
         errorLName.style.visibility = "visible";
         return false;
    } 
    errorLName.style.visibility = "hidden";
}

Ajax 验证（这就是我想要做的）

$('form.ajax').on('submit',function(){
       var that = $(this);
       url = that.attr('action');
       method = that.attr('method');
       data = {};
       that.find('[name]').each(function(index,value){
             var that = $(this),
             name = that.attr('name'),
             value = that.val();
             data[name] = value;
       });
       $.ajax({
             url: url,
             type: type,
             data : data,
             success: function(response){
                   console.log(response);
             }
       });
       return false;
});

那么，我应该如何处理在我的 Javascript 代码中实现 Ajax 的解决方案。如何合并这些代码以验证表单域？

谢谢！

Answer 1

你不能在 ajax 验证中添加 no ajax 部分吗，像这样：

$('form.ajax').on('submit',function(){
   var that = $(this);
   url = that.attr('action');
   method = that.attr('method');
   data = {};
   that.find('[name]').each(function(index,value){
         var that = $(this),
         name = that.attr('name'),
         value = that.val();
         data[name] = value;
   });

   // CODE ADDED HERE
   if(validateFirstName() && validateLastName()){
       $.ajax({
           url: url,
           type: type,
           data : data,
           success: function(response){
               console.log(response);
           }
        });
    }
    return false;
});

function validateFirstName(){
    var fName = document.getElementById("firstName").value;
    if(fName==""){
        errorFName.style.visibility = "visible";
        return false;
    } 
    errorFName.style.visibility = "hidden";
    // CODE ADDED HERE
    return true;
}

function validateLastName(){
    var LName = document.getElementById("lastName").value;
    if(LName==""){
        errorLName.style.visibility = "visible";
        return false;
    } 
    errorLName.style.visibility = "hidden";
    // CODE ADDED HERE
    return true;
}