Question

我试图让联系表格工作，但当我删除id =＆＃34; contactform＆＃34;验证不起作用，但我获得成功消息，当我删除id =＆＃34; contactform＆＃34;验证没有工作。所以这里是我的代码PHP代码工作正常，但在jquery有一些问题

c:\S library\

我的PHP代码是：

// Contact form
$(function() {
    // validate contact form on keyup and submit
    $("#contactForm").validate({
        rules: {
            name: {
                required: true,
                minlength: 2,
                lettersonly: true
            },
            email: {
                required: true,
                minlength: 6,
                email: true
            },
            phone: {
                required: true,
                digits: true,
                minlength: 10,
                maxlength: 15
            },
            message: {
                required: true,
                minlength: 6
            }
        },
        messages: {
            name: {
                required: "Please enter your name",
                minlength: "Minimum 2 characters",
                lettersonly: "Only letters please!"
            },
            email: {
                required: "Please enter your email address",
                minlength: "Minimum 6 characters",
                email: "That's an invalid email"
            },
            phone: {
                required: "Please enter your phone number",
                digits: "Only digits (no spaces)",
                minlength: "Minimum 10 characters",
                maxlength: "Maximum 15 characters"
            },
            message: {
                required: "Please enter your message",
                minlength: "Minimum 6 characters"
            }
        },
        success: function(label) {
            label.addClass("valid").text("Perfect!");
        },
        submitHandler: function(element) {

            var ajaxform = $(element),
                url = ajaxform.attr('action'),
                type = ajaxform.attr('method'),
                data = {};

            $(ajaxform).find('[name="submit"]').html('<i class="fa fa-circle-o-notch fa-spin fa-fw"></i> Sending...');


            ajaxform.find('[name]').each(function(index, value) {
                var field = $(this),
                    name = field.attr('name'),
                    value = field.val();

                data[name] = value;

            });

            $.ajax({
                url: url,
                type: type,
                data: data,
                success: function(response) {
                    if (response.type == 'success') {
                        $("#contactForm").before("<div class='alert alert-success' role='alert'><a href='#' class='close' data-dismiss='alert'>&times;</a>" + response.text + "</div>");
                        $(ajaxform).each(function() {
                            this.reset();
                            $(this).find('[name="submit"]').html('<i class="fa fa-paper-plane fa-fw"></i> Send');
                        }).find('.valid').each(function() {
                            $(this).remove('label.valid');
                        })
                    } else if (response.type == 'error') {
                        $("#contactForm").before("<div class='alert alert-danger' role='alert'><a href='#' class='close' data-dismiss='alert'>&times;</a>" + response.text + "</div>");
                        $(ajaxform).find('[name="submit"]').html('<i class="fa fa-paper-plane fa-fw"></i> Send');
                    }
                }
            });

            return false;
        }
    });

});


**and my HTML Code is:**

    <!--- Contact Section-->
    <!-- Contact section -->
    <
    section id = "contact"
class = "contact content-section no-bottom-pad wow fadeIn"
data - wow - offset = "10" >
    <
    div class = "container" >
    <
    div class = "row text-center" >
    <
    div class = "col-md-12" >
    <
    h2 > Contact < /h2> <
    h3 class = "caption gray" > Feel free to get in touch with us
if you have a new project or simply something awesome < /h3> <
    /div><!-- /.col - md - 12 -->

    <
    /div><!-- /.row-- >
    <
    /div><!-- /.container-- >

    <
    div class = "container" >
    <
    div class = "row form-container" >

    <
    div class = "col-md-8 contact-form" >
    <
    h3 > Drop us a line < /h3> <
    form class = "ajax-form"
id = "contactForm"
method = "post"
action = "assets/php/contact.php" >
    <
    div class = "form-group" >
    <
    input type = "text"
class = "form-control"
id = "name"
name = "name"
placeholder = "Your Name..."
value = ""
required >
    <
    /div> <
    div class = "form-group" >
    <
    input type = "email"
class = "form-control"
id = "email"
name = "email"
placeholder = "Your email..."
value = ""
required >
    <
    /div> <
    div class = "form-group" >
    <
    input type = "phone"
class = "form-control"
id = "phone"
name = "phone"
placeholder = "Your phone..."
value = ""
required >
    <
    /div> <
    div class = "form-group" >
    <
    textarea class = "form-control"
rows = "4"
name = "message"
placeholder = "Your message..."
required > < /textarea> <
    /div> <
    div class = "form-group" >
    <
    button type = "submit"
name = "submit"
class = "btn btn-default" > < i class = "fa fa-paper-plane fa-fw" > < /i> Send</button >
    <
    /div> <
    /form> <
    /div><!-- /.contact - form-- >

Answer 1

您可以使用以下方法验证表单：

$(function(){
   $('form').validate({
         'rules': {
         },
         'messages': {
         }
   })
})

jquery id在表单验证中导致错误

1 个答案: