Question

我的联系表单使用ajax，但是，当您尝试在不填写任何字段的情况下验证表单时，只会显示四个错误消息中的三个。显示“姓氏”，“电子邮件地址”和“消息”错误标题，但“名字”错误标题不显示。当我取出“姓氏”错误字段并重新测试时，会显示“名字”字段。

我已经尝试扩展它以使其变大，认为根本没有空间显示所有四个错误标题，但我不认为是这种情况。如何纠正这一情况，以便在用户未填写任何字段时显示所有四条错误消息（标题）？

这是我的代码：

$(document).ready(function() {
    $('form #response').hide();


    $('.button').click(function(e) {

        e.preventDefault();

        var valid = '';
        var required = ' is required.';
        var first = $('form #first').val();
        var last = $('form #last').val();
        var email = $('form #email').val();
        var message = $('form #message').val();
        var tempt = $('form #tempt').val();
        var tempt2 = $('form #tempt2').val();

        if (first = '' || first.length <= 1) {
            valid = '<p>Your first name' + required + '</p>';
        }

        if (last = '' || last.length <= 1) {
            valid = '<p>Your last name' + required + '</p>';
        }

        if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {
            valid += '<p>Your email address' + required + '</p>';
        }

        if (message = '' || message.length <= 4) {
            valid += '<p>A message' + required + '</p>';
        }

        if (tempt != 'http://') {
            valid += '<p>We can\'t allow spam bots.</p>';
        }

        if (tempt2 != '') {
            valid += '<p>A human user' + required + '</p>';
        }

        if (valid != '') {
            $('form #response').removeClass().addClass('error')
                .html('' +valid).fadeIn('fast');
        }

        else {
            $('form #response').removeClass().addClass('processing').html('Sending...').fadeIn('fast');

            var formData = $('form').serialize();
            submitForm(formData);
        }

    });

});

function submitForm(formData) {

    $.ajax({

            type: 'POST',
            url: 'mail/mailform.php',
            data: formData,
            dataType: 'json',
            cache: false,
            timeout: 4000,
            success: function(data) {

                            $('form #response').removeClass().addClass((data.error === true) ? 'error' : 'success')
                                            .html(data.msg).fadeIn('fast');

                            if ($('form #response').hasClass('success')) {
                                setTimeout("$('form #response').fadeOut('fast')", 4000);
                        }
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {

                        $('form #response').removeClass().addClass('error')
                                    .html('<p>There was an <strong>' + errorThrown +
                                        '</strong> error due to an <strong>' + textStatus +
                                        '</strong> condition.</p>').fadeIn('fast');
                    },
                    complete: function(XMLHttpRequest, status) {

                        $('form')[0].reset();
                    }

          });


};

HTML -----------＆gt;＆gt;

<form class="contact-me" action="mail/mailform.php" method="post" name="contact-me">

<div id="response"><!-----------------CONTAINS FORM ERROR MESSAGE--------------></div>
<input name="First" class="required" title="Your First Name is Required" id="first" autofocus placeholder="First Name" type="text" maxlength="15"></input><br>
<input name="Last"  title="Your Last Name is Required" id="last" placeholder="Last Name" type="text" maxlength="15"></input><br>
<input name="E-Mail"  title="E-Mail Address is Required" id="email" placeholder="Email Address" type="email" maxlength="50"></input><br>
<textarea name="Message"  title="Comments are Required" placeholder="Comments" rows="1" cols="50" id="message" onKeyDown="textCounter(this.form.comments,this.form.countDisplay);"onKeyUp="textCounter(this.form.message,this.form.countDisplay);"></textarea><br>
<input type="hidden" name="tempt" id="tempt" value="http://" />
<input type="hidden" name="tempt2" id="tempt2" class="clear" value="" />
<input name="countDisplay" type="text" id="countdisplay" value="2000" size="4" maxlength="4" readonly></input><br>
<button class="button" ontouchstart="('touchstart');">SEND</button>
</form>

Answer 1

对于每次验证，您应始终键入valid += "validation message"而不是valid = "validation message"。您忘记了+=的名字和姓氏验证。

表单验证的自定义错误标题无法正确显示

1 个答案: