ajax php表单验证-不调用php url

时间:2018-10-19 07:35:50

标签: javascript jquery ajax

我已经写了一个php文件和ajax代码形式的联系表格验证,如电子邮件和手机号码,但是当我单击sumbit按钮时,它不会转到php页面的ajax表格。我需要验证这些字段并显示适当错误消息的代码。

下面是我的Ajax代码:

    <script type="text/javascript">
    $("#my_contact_form").submit(function(e){
        e.preventDefault(); //prevent default action 
        var proceed = true;
        var form = this;

        //simple validation at client's end
        //loop through each field and we simply change border color to red for invalid fields       
        $(form).find(':required').each(function(){
            $(this).css('border-color',''); 
            if(!$.trim($(this).val())){ //if this field is empty 
                $(this).css('border-color','red'); //change border color to red   
                proceed = false; //set do not proceed flag
            }
            //check invalid email
            var email_reg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
            if($(this).attr("type")=="email" && !email_reg.test($.trim($(this).val()))){
                $(this).css('border-color','red'); //change border color to red   
                proceed = false; //set do not proceed flag              
            }   

        }).keyup(function() { //reset previously set border colors on .keyup()
            $(this).css('border-color',''); 
        }).change(function() {  //for select box
            $(this).css('border-color',''); 
        }); 

        if(proceed){ //everything looks good! proceed...
            //get input field values data to be sent to server
            var post_url = $(this).attr("action"); //get form action url
            var request_method = $(this).attr("method"); //get form GET/POST method
            var form_data = $(this).serialize(); //Encode form elements for submission

            //Ajax post data to server
            $.ajax({
                url : post_url,
                type: request_method,
                dataType : 'json',
                data : form_data
            })
            .done(function(response){ 
                if(response.type == 'error'){ //load json data from server and output message     
                    output = '<div class="error">'+response.text+'</div>';
                }else{
                    $(form)[0].reset(); //reset this form upon success
                    output = '<div class="success">'+response.text+'</div>';
                }
                $("#contact_results").html(output);
            });
        }
    });
    </script>

0 个答案:

没有答案