Question

我为打开可能是非常基本的帖子而道歉，我正在学习Ajax，请记住这一点。

我有一个简单的注册表。

我想做什么

验证表格
如果所有人都在按顺序注册新用户

我已经设法获得Ajax脚本来注册一个新用户，但我的问题来自验证部分hench我转向这里寻求一些帮助和建议

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

就像我说的那样，注册部分一切正常，但是一旦我添加了JavaScript验证，整个脚本就停止了工作。 我最大的问题是我的浏览器没有向我显示任何错误，所以我不知道我哪里出错了

非常感谢任何帮助

Answer 1

未触发您的sendForm功能。下面的代码作为参考，是通过jquery触发提交事件的正确方法。

<强>的jQuery

md-list

Answer 2

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

Ajax验证没有请求发送到服务器

2 个答案: