0

再会。一开始我想为代码最后一部分的大混乱道歉。我在验证我的预填表格时遇到问题。所以到目前为止我所做的是一个带有预填充值的表格。当用户单击该字段时，它会删除预填充的值。我试图针对空字段验证此表单，但只要预先填写它们就不会显示缺少字符串。

让我介绍一下 HTML：

    <form action="" method="post" id="form1" class="form" action="scripts/form-quote.php">
    <input class="swap validate"     id="name"      name="name"         type="text" value="Name" />                                             <p id="iname" class="validation-error"></p>
    <input class="swap emailvalid"   id="email"     name="email"        type="text" value="E-mail" />                                           <p id="iemail" class="validation-error"></p>
    <textarea class="swap validate" id="add-req" name="add-req" cols="43" rows="8" >Please explain your requirements</textarea>                 <p id="iadd-req" class="validation-error"></p>
    <input class="swap"  id="ad"        name="ad"           type="text" value="Where did you hear about us?" />

    <input class="submit" name="Submit" type="submit" value="Send">
</form>

和 jQuery - 这部分工作正常：

    $.fn.swapText = function(){
    return this.each(function(){
        var tmpDefVal = $(this).val();
        $(this).css('color', '#999');

        $(this).focus(function(){
            if($(this).val() == tmpDefVal){
                $(this)
                    .css('color', '#000')
                    .val('');
            }
        });

        $(this).blur(function(){
            if($(this).val() == ''){
                $(this)
                    .css('color', '#999')
                    .val(tmpDefVal);
            }
        });

    });
};

$(document).ready(function(){

    $('.swap').swapText();

});

jQuery - 这是一团糟。我试图重新创建我很久以前在一些帮助下完成的现有一个，但它正在针对空字段进行验证。现在我想根据预填充的字段来验证它：

    function isNotEmpty(string){

    if(string.length < 1){
        return false;
    }else{
        return true;
    }
}

function checkOnChange(){
    var infoField = document.getElementById('i'+this.id);

    if(this.type == 'checkbox'){ 
        if(this.checked){
            infoField.innerHTML = '';
        }else{
            infoField.innerHTML = 'Required field';
        }
    }else{
        if(isNotEmpty(this.value)){
            this.className = 'ok';
            infoField.innerHTML = '';
            //this.style.backgroundColor = '';
        }else{
            //this.style.backgroundColor = 'red';
            this.className = 'err';
            infoField.innerHTML = 'Required field';
        }
    }
}



$(document).ready(function(){
    $('.swap').swapText();
    $('#email').swapText();

    $('#email').keyup(function(){
        var regexp = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

        if(regexp.test($(this).val())){
            $(this).removeClass('err');
            $(this).addClass('ok');
        }else{
            $(this).removeClass('ok');
            $(this).addClass('err');
        }
    });
});


window.onload = function(){

    var inputName = document.getElementById('name');
    var inputMsg = document.getElementById('add-req');

    document.forms[0].onsubmit = function(){
        var formValid = true;

        if(isNaN(this.nrklienta.value)){
        }else{
        }

        if(!isNotEmpty(this.pers.value)){
            var infoField = document.getElementById('i'+this.pers.id);

            this.pers.className = 'err';
            infoField.innerHTML = 'Required field';

            formValid = false;
        }else{
        }

        //return false;
        if(formValid){
            return true;
        }else{
            return false;
        }
    }


}





//* Email validation

$(document).ready(function(){

    $('#email').swapText();

    $('#email').keyup(function(){
        var regexp = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

        if(regexp.test($(this).val())){
            $(this).removeClass('err');
            $(this).addClass('ok');
        }else{
            $(this).removeClass('ok');
            $(this).addClass('err');
        }
    });
});

很抱歉代码的最后一部分出现了大混乱，但这只是为了展示我想要实现的目标。因此，如果用户不填写#name、#email（电子邮件的验证码应该可以工作，不知道为什么不可以）和#add-req（或者如果可以通过.validate 类完成则更好）然后单击发送按钮后，它不会发送表单，而是在 p (.validation-error) "必填字段" + 更改实际字段的类中显示一条消息。

这里的 jsFiddle

4

1 回答 1

2

您应该<label>为每个元素<input>和placeholder属性使用元素，而不是预填充值。

例如，仅采用您的输入之一，您可以使用：

<label for="email">E-mail:</label>
<input class="swap emailvalid" id="email" name="email" type="text" placeholder="E-mail" />

如果您不希望它显示，您可以使用 CSS 隐藏标签，但对于无视力的用户，它仍然应该存在。

您会发现使用占位符可以避免您在代码中跳过各种循环来实现所需的结果。请允许我演示一下。（如果 jsfiddle.net 仍然关闭，请使用http://jsbin.com/akesep/2/edit。）

使用以下 HTML：

<form method="post" id="form1" action="scripts/form-quote.php">
    <ul>
        <li>
            <label for="name">Name</label>
            <input class="required" id="name" name="name" type="text" placeholder="Name" />
        </li>
        <li>
            <label for="email">E-mail:</label>
            <input class="required" id="email" name="email" type="text" placeholder="E-mail" />
        </li>
        <li>
            <label for="add-req">Message</label>
            <textarea class="required" id="add-req" name="add-req" cols="43" rows="8" placeholder="Please enter your message"></textarea>
        </li>
        <li>
            <label for="ad">Referrer</label>
            <input id="ad" name="ad" type="text" placeholder="Where did you hear about us?" />
        </li>
    </ul>
    <button type="submit">Send</button>
</form>

漂亮干净的标记。没有使 javascript 复杂化的预填充值。正确使用占位符和标签。

然后以下 jQuery 脚本将验证必填字段和有效电子邮件的完成情况：

var addErrorMessage = function (field) {
        var err = $(document.createElement('p')).addClass('validation-error').text('Required field');
        field.addClass('err').after(err);
    },
    clearError = function () {
        var t = $(this);
        if (t.hasClass('err')) {
            t.removeClass('err');
            t.next('p').empty().remove();
        }
    },
    isEmpty = function (str) {
        return str.trim().length < 1;
    },
    isValidEmail = function (str) {
        var regexp = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        return regexp.test(str);
    },
    validateForm = function () {
        var requiredFields = $(this).find('.required'),
            email = $('#email'),
            fieldsValidate = true;

        // check that required fields are not empty
        requiredFields.each(function () {
            var t = $(this);
            if (isEmpty(t.val())) {
                fieldsValidate = false;
                if (!t.hasClass('err')) {
                    addErrorMessage(t);
                }
            }
        });

        // check that email is valid
        if (!isValidEmail(email.val().trim())) {
            fieldsValidate = false;
            if (!email.hasClass('err')) {
                addErrorMessage(email);
            }
        }

        return fieldsValidate;
    };

$('input, textarea').keyup(clearError);
$('#form1').submit(validateForm);

您可以按照相同的原则轻松添加其他类型的验证，但这应该会给您一个良好的开端。

于 2013-07-05T12:21:02.567 回答