使用对服务器的Ajax调用验证表单字段—Learning Ajax - Validate form fields with Ajax calls to a server - Learning Ajax

Validate form fields with Ajax calls to a server - Learning Ajax

我需要使用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的解决方案呢。如何合并这些代码以验证表单字段？

谢谢！

难道不能在ajax验证中添加无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;
}