Question

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

让我提出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 here

Answer 1

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

例如，只需输入一个输入，就可以使用：

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

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

您会发现使用占位符可以避免在代码中跳过各种环节以获得所需的结果。请允许我demonstrate。（如果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);

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

使用jquery验证预填充表单

1 个答案: