1

我正在使用 jquery 在我的表单上设置我的错误消息，当我去查看它时，它不会要求输入姓名字段，而只是要求电子邮件，即使我已经包含了它。这是我的代码：

<form method="post" action="" id="contactform">
            <fieldset class="first">


            <div id="response"></div>  


            <div class="name_input">                
            <input name="name" id="name" class="required" type="text" onfocus="if(this.value == 'Name'){this.value = '';}" onblur="if(this.value == ''){this.value='Name';}" value="Name" maxlength="128" />                
            </div>



            <div id="email_input">              
            <input id="email" name="email" onfocus="if(this.value == 'Email'){this.value = '';}"  onblur="if(this.value == ''){this.value='Email';}" class="required" type="text" value="Email" maxlength="128" />         
            </div>

            <div id="button">
            <input type="submit" class="button" name="Submit" value="" />
            </div>


            </fieldset>


        </form>

和我的 JS：

$(document).ready(function() {

$('form #response').hide();

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


    e.preventDefault();


    var valid = '';
    var required = ' is required.';
    var name = $('form #name').val();
    var email = $('form #email').val();



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

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



    if (valid != '') {

        $('form #response').removeClass().addClass('error')
            .html('<strong>Please correct the errors below.</strong>' +valid).fadeIn('fast');           

    }


    else {

        $('form #response').removeClass().addClass('processing').html('Processing...').fadeIn('fast');                                      

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

  });
});

我的姓名标签在其他任何地方都没有任何冲突，所以我不知道会发生什么

4

1 回答 1

1

这条线是罪魁祸首

if (name == '' || name.length < 2) {

当该字段有 1 个字符时，它将评估为false，并且不会费心检查下一个条件name.length

你可以通过这个来简化代码

if (name.length < 2) {

如果name=''.

此外，要修剪前导和尾随空格，您可能希望获得这样的名称字段：

var name = $.trim( $('form #name').val() );

这样，字段中只有两个或更多空格也会触发验证。

更新：

问题是您已经在该input字段中有一个值。您正在使用焦点/模糊事件根据需要删除/添加它。当您验证它时，这将算作长度 = 4 的值。

有几种方法可以解决它。

  1. 使用placeholder. 所有现代浏览器都支持它，如下所示：

    <input type="text" id="name" placeholder="Name">

  2. 在名称验证中添加进一步的条件，如下所示：

    if (name === 'Name' || name.length < 2 ) {

这应该有望解决您的问题

于 2012-12-07T06:04:26.757 回答