需要在jQuery ajax驗證之前注入客戶端js驗證

我無法讓我的驗證（表單）函數在「我的ajax函數之前」運行。任何有關如何將兩者結合在一起並在提交表單時按順序運行的建議將是最有幫助的。謝謝！需要在jQuery ajax驗證之前注入客戶端js驗證

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
    <script type="text/javascript" src="includes/JSValidation.js"></script> 
    <script type="text/javascript"> 


    // These first three lines of code compensate for Javascript being turned on and off. 
    // It simply changes the submit input field from a type of "submit" to a type of "button". 

var paraTag = $('input#submit').parent('p'); 
$(paraTag).children('input').remove(); 
$(paraTag).append('<input type="button" name="submit" id="submit" value="Contact Us!" />'); 

    $(function() { 
$('#contactForm input#submit').click(function() { 
$('#contactForm').append('<img src="ajax-loader.gif" class="loaderIcon" alt="Loading..." />'); 
     var firstname = $('input#firstname').val(); 
     var lastname = $('input#lastname').val(); 
     var email = $('input#email').val(); 
     var message = $('textarea#message').val(); 

     $.ajax({ 
      type: 'post', 
      url: 'email.php', 
      data: 'firstname=' + firstname + '&lastname=' + lastname + '&email=' + email + '&message=' + message, 

      success: function(results) { 
       $('#contactform img.loaderIcon').fadeOut(1000); 
        $('td#response').html(results); 
      } 
     }); //end ajax 
}); 
}); 



//Validation 
function validate(form){ 
var firstName = form.firstname.value; 
var lastName = form.lastname.value; 
var email = form.email.value; 
var subject = form.subject.value; 
var message = form.message.value; 
var errors = []; 

if (!reProperName.test(firstName)) { 
    errors[errors.length] = "You must enter a valid first name."; 
} 

if (!reProperName.test(lastName)) { 
    errors[errors.length] = "You must enter a valid last name."; 
} 

if (!reEmail.test(email)) { 
    errors[errors.length] = "You must enter a valid email address."; 
} 

if (checkTextArea(message,1000)) { 
    errors[errors.length] = "Your message is too long. It must be less than 100 characters."; 
} 

if (errors.length > 0) { 
    reportErrors(errors); 
    return false; 
} 
submitForm(contactForm); 
return true; 

} 

function reportErrors(errors){ 
var msg = "There were some problems...\n"; 
for (var i = 0; i<errors.length; i++) { 
    var numError = i + 1; 
    msg += "\n" + numError + ". " + errors[i]; 
} 
alert(msg); 
} 
</script> 
</head> 
<body> 
<div id="wrap"> 
<?php 
require 'includes/header.php'; 
?> 
<div id="main"> 
    <h1 align="center">Contact Form:</h1> 
    <div> 
     <form method="post" id="contactForm" autocomplete="on" onclick="return validate(this);" action="includes/email.php"> 
     <table width="350" border="0" align="center" cellpadding="4" cellspacing="0"> 
      <tr> 
      <td><label>Your First Name:</label></td> 
      <td><input type="text" name="firstname" id="firstname" style="width:100%" />  </td> 
      </tr> 
      <tr> 
      <td><label>Your Last Name:</label></td> 
      <td><input type="text" name="lastname" id="lastname" style="width:100%" /></td> 
      </tr> 
      <tr> 
      <td><label>Your Email:</label></td> 
      <td><input type="text" name="email" id="email" style="width:100%" /></td> 
      </tr> 
      <tr> 
      <td colspan="2"> 
       <label>Your Message:</label><br /><br /> 
       <textarea name="message" style="width:100%;height:160px" id="message"></textarea> 
      </td> 
      </tr> 
      <tr align="center"> 
      <td colspan="2"><input type="submit" name="submit" value="Contact Us!" id="submit"></td> 
      </tr> 
      <tr align="center"> 
      <td colspan="2" id="response" /> 
      </tr> 
     </table> 

     </form> 
    </div>     

<div class="push" /> 
</div> 
<?php 
    require 'includes/footer.php'; 
?> 
</body>

來源

2014-02-20 user3285801

更改驗證功能如下，

function validate() { 
    var firstName = $("#firstname").val(); 
    var lastName = $("#lastname").val(); 
    var email = $("#email").val(); 
    var subject = $("#subject").val(); 
    var message = $("#message").val(); 

    *************** 
}

和改變jQuery的事件，

$(function() { 
    $('#contactForm #submit').click(function (e) { 
     e.preventDefault(); 
     if (validate()) { 
      // Ajax code 
     }else{ 
      // not valid 
     } 
    }); 
});

來源

2014-02-20 09:36:51

需要在jQuery ajax驗證之前注入客戶端js驗證

回答

相關問題