Need to inject client-side js validation before jquery ajax validation

Question

I'm having trouble getting my validate(form) function to run "before" my ajax function. Any recommendations on how to tie the two together and have them run in order when the form is submitted would be most helpful.. thanks!

    <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>

Answer 1

Change the validate function as following,

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

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

and change the jQuery event,

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

Need to inject client-side js validation before jquery ajax validation

Question

1 answers

solution1
1 2014-02-20 09:36:51

Need to inject client-side js validation before jquery ajax validation

Question

1 answers

solution1 1 2014-02-20 09:36:51

solution1
1 2014-02-20 09:36:51