Ajax验证无请求发送到服务器

Question

I apologize for opening what might be a very basic post, I am learning Ajax please keep that in mind.

I have a simple registration form.

What im trying to do

• validate the form
• if all is in order register new user

I have managed to get the Ajax script to register a new user but my problem comes in with the validation part hench im turning here for a bit of help and advice

HTML

 <div id="regResponse">
 </div>
 <form class="form-horizontal" id="regForm" role="form" method="post" action="../register.php" >
     <div class="form-group">
         <label class="control-label col-sm-2" for="regName">Name:</label>
         <div class="col-sm-10">
             <input type="text" name="regName" class="form-control" id="name" placeholder="">
         </div>
     </div>
     <div class="form-group">
         <label class="control-label col-sm-2" for="regLastName">Surname:</label>
         <div class="col-sm-10">          
             <input type="text" name="regLastname" class="form-control" id="lastname" placeholder="">
         </div>
     </div>
     <div class="form-group">
         <label class="control-label col-sm-2" for="regEmail">Email:</label>
         <div class="col-sm-10">          
             <input type="text" name="regEmail" class="form-control" id="regEmail" placeholder="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="regPword">Pword:</label>
        <div class="col-sm-10">          
            <input type="text" name="regPword" class="form-control" id="regPword" placeholder="">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-2" for="confRegPword">Confirm Pword:</label>
        <div class="col-sm-10">          
            <input type="text" name="confRegPword" class="form-control" id="regPword2" placeholder="">
        </div>

JQUERY AJAX

function sendForm() {
    var valid;
    valid = validateContact()
    if(valid){
        // Get the form.
        var form = $('#regForm');
        // Get the messages div.
        var formMessages = $('#regResponse');
        // Set up an event listener for the contact form.
        $(form).submit(function(e) {
            // Stop the browser from submitting the form.
            e.preventDefault();
            // Serialize the form data.
            var formData = $(form).serialize();
            // Submit the form using AJAX.
            $.ajax({
                type: 'POST',
                url: $(form).attr('action'),
                data: formData
            })
            .done(function(response) {
                // Make sure that the formMessages div has the 'success' class.
                $(formMessages).removeClass('error').addClass('success');
                // Set the message text.
                $(formMessages).html(response); // < html();
                // Clear the form.
                $('').val('')
            })
            .fail(function(data) {
                // Make sure that the formMessages div has the 'error' class.
                $(formMessages).removeClass('success').addClass('error');
                // Set the message text.
                var messageHtml = data.responseText !== '' ? data.responseText : 'Oops! An error occured and your message could not be sent.';
                $(formMessages).html(messageHtml); // < html()
            });
        });
    }
}

function validateContact(){
    var valid = true;
    var name = document.getElementById("name").value;
    var lastname = document.getElementById("lastname").value;
    var email = document.getElementById("regEmail").value;  
    if(name ==''){
        document.getElementById("name").style.borderColor="red";
        name.value="Please Enter Name";
        valid = false;  
    }
    if(lastname ==''){
        valid = false;  
    }
    if(email ==''){
        valid = false;  
    }
    return valid;
}

PHP

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    //get variables from reg form
    $name = $_POST['regName'];
    $lastName = $_POST['regLastname'];
    $email = $_POST['regEmail'];
    :
    $sql ="INSERT INTO members......."
    ($result = mysql_query($sql) or trigger_error(mysql_error()."in".$sql);
    if($result){
        echo '<h3 style="blue">Registration Succesesfull</h3>'; 
    }
    else{
        echo '<h3 style="blue">OOPS...Something went wrong here</h3>';  
    }   
}//request POST method

Like I said as form the registration part all is working but as soon as I added the JavaScript validation the whole script stopped working. My biggest problem is that my browser is not showing me any errors so I dont know where I am going wrong

Any help will be much appreciated

Answer 1

Your sendForm function is not triggered. Code below as your reference, is the right way to trigger submit event via jquery.

jQuery

$(function() {
    $('form').submit(function(e) {
        e.preventDefault();
        var valid;
        valid = validateContact()
        if(valid ) {
            $.ajax({
                type: 'POST',
                url: "http://facebook.com",
                data: {},
                dataType: 'json',
                success: function() {
                    alert('success');
                },
                error: function() {
                    alert('error');
                }
            })
        }
    });
});


function validateContact(){
    var valid = true;
    var name = document.getElementById("name").value;
    var lastname = document.getElementById("lastname").value;
    var email = document.getElementById("regEmail").value;  
    if(name ==''){
        document.getElementById("name").style.borderColor="red";
        name.value="Please Enter Name";
    valid = false;  
    }
    if(lastname ==''){
    valid = false;  
    }
    if(email ==''){
    valid = false;  
    }
    return valid;
}

Answer 2

我认为您需要在html中添加一个按钮，并对该按钮的click事件调用函数sendForm（）。