Fatal编程技术网

Javascript/jQuery表单验证

javascript jquery forms validation

Javascript/jQuery表单验证,javascript,jquery,forms,validation,Javascript,Jquery,Forms,Validation,我让大多数表单验证正常工作，但唯一的问题是，当表单在提交时检测到错误，并且用户纠正了错误时，错误文本不会消失。这可能会让用户感到困惑，但我似乎无法找到一种方法使错误文本以我这样做的方式消失。另外，我知道我可以选择PHP验证，但有几个原因让我想使用这个前端验证。下面是表单的整个验证脚本。提交部分位于底部： JavaScript/jQuery var valid = 0; function checkName(elem) { //gather the callin

我让大多数表单验证正常工作，但唯一的问题是，当表单在提交时检测到错误，并且用户纠正了错误时，错误文本不会消失。这可能会让用户感到困惑，但我似乎无法找到一种方法使错误文本以我这样做的方式消失。另外，我知道我可以选择PHP验证，但有几个原因让我想使用这个前端验证。下面是表单的整个验证脚本。提交部分位于底部：

JavaScript/jQuery

    var valid = 0;

    function checkName(elem) {

        //gather the calling elements value
        var val = document.getElementById(elem.id).value;
        //Check length
        if (val.length<1) {
            document.getElementById("errorName").innerHTML = "<span>Don't forget your name.</span>";

        } else if (val.length>40){
            document.getElementById("errorName").innerHTML = "<span>This doesn't look like a name.</span>";
        //If valid input increment var valid.
        } else {
            document.getElementById("errorName").innerHTML = "";
            valid++;

        }
    }

    function checkEmail(elem) {

        var val = document.getElementById(elem.id).value;
        //Check email format validity
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if (!re.test(val)) {
            document.getElementById("errorEmail").innerHTML = "<span>Please enter a valid email.</span>";
        } else {
            document.getElementById("errorEmail").innerHTML = "";
            valid++;
        }
    }

    function checkMessage(elem) {

        var val = document.getElementById(elem.id).value;

        if (val.length<1) {
            document.getElementById("errorMessage").innerHTML = "<span>It looks like you forgot the message.</span>";

        } else if (val.length>2000) {
            document.getElementById("errorMessage").innerHTML = "<span>It looks like your message is too long.</span>";

        } else {
            document.getElementById("errorMessage").innerHTML = "";
            valid++;    
        }

    }


//Contact: jQuery check for null/empty/errors
$(document).ready(function() {

function checkSubmit() {
    if (valid == 3) {
        document.getElementById("errorSubmit").innerHTML = "";
    }
}

//If errors when submitting display message

$('#form13').submit(function(submit) {
    if ($.trim($("#name").val()) === "" || $.trim($("#email").val()) === "" || $.trim($("#message").val()) === "") {
        document.getElementById("errorSubmit").innerHTML = "<span>Please fill out all the form fields.</span>";
        submit.preventDefault();
    } else if (valid < 3) {
        document.getElementById("errorSubmit").innerHTML = "<span>Please check the errors above.</span>";
        submit.preventDefault();
    }
  })
});

var-valid=0；
函数checkName（elem）{
//收集调用元素的值
var val=document.getElementById（elem.id）.value；
//检查长度
如果（值长度40）{
document.getElementById（“errorName”）.innerHTML=“这看起来不像一个名称。”；
//如果输入有效，则增量变量有效。
}否则{
document.getElementById（“errorName”）.innerHTML=“”；
有效++；
}
}
功能检查电子邮件（elem）{
var val=document.getElementById（elem.id）.value；
//检查电子邮件格式的有效性
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
如果（！重新测试（val））{
document.getElementById（“errorEmail”）.innerHTML=“请输入有效的电子邮件。”；
}否则{
document.getElementById（“errorEmail”）.innerHTML=“”；
有效++；
}
}
功能检查消息（elem）{
var val=document.getElementById（elem.id）.value；
如果（val.length2000）{
document.getElementById（“errorMessage”）.innerHTML=“看起来您的邮件太长了。”；
}否则{
document.getElementById（“errorMessage”）.innerHTML=“”；
有效++；
}
}
//联系人：jQuery检查空/空/错误
$（文档）.ready（函数（）{
函数checkSubmit（）{
如果（有效==3）{
document.getElementById（“errorSubmit”）.innerHTML=“”；
}
}
//如果提交显示消息时出错
$（'#form13'）.submit（函数（submit）{
如果（$.trim（$（“#name”）.val（））===”（$（“#email”）.val（））==”（$（“#message”）.val（））===”（$（“#message”）.trim（$）==”）{
document.getElementById（“errorSubmit”）.innerHTML=“请填写所有表单字段。”；
submit.preventDefault（）；
}否则如果（有效<3）{
document.getElementById（“errorSubmit”）.innerHTML=“请检查上述错误。”；
submit.preventDefault（）；
}
})
});
HTML表单

 <div class="row"> 
            <div class="col-md-8 col-md-offset-2"> 
                <div class="cform" id="contact-form"> 
                    <form id="form13" name="form13" role="form" class="contactForm" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate
  action="https://Some3rdPartyPOSTService"> 
                        <div class="form-group"> 
                            <label for="name">Your Name</label>                                 
                            <input type="text" name="Field1" class="form-control" id="name" placeholder="Tony Stark" onblur="checkName(this)"/>
                            <span id="errorName" style="margin-left:10px;"></span>                                                              
                        </div>                             
                        <div class="form-group"> 
                            <label for="email">Your Email</label>                                 
                            <input type="email" class="form-control" name="Field4" id="email" placeholder="" data-rule="email" data-msg="Please enter a valid email" onblur="checkEmail(this)"/>
                            <span id="errorEmail" style="margin-left:10px;"></span>                                  
                        </div>                                                     
                        <div class="form-group"> 
                            <label for="message">Message</label>                                 
                            <textarea class="form-control" name="Field3" id="message" rows="5" data-rule="required" data-msg="Please write something here" onblur="checkMessage(this)"></textarea>  
                            <span id="errorMessage" style="margin-left:10px;"></span>                                
                        </div>
                        <span id="errorSubmit" style="margin-left:10px;"></span>
                        <button type="submit" class="btn btn-theme pull-left">SEND MESSAGE</button>
                    </form>                         
                </div>                     
            </div>                 
            <!-- ./span12 -->                 
        </div>             
    </div>         
</section>     


你的名字
你的电子邮件
消息
发送消息
如果出现以下情况，只需检查onChange事件回调：

var x = getElementById("formid"); //  then add a listener     
x.addEventListener('change', function () {

   callback with your code that examines the form

});
或者侦听特定的文本框更改事件，这是最简单的方法，如果不满足条件，则查找禁用提交的方法。

如果出现以下情况，只需选中onChange事件回调：

var x = getElementById("formid"); //  then add a listener     
x.addEventListener('change', function () {

   callback with your code that examines the form

});
或者侦听特定的文本框更改事件，这是最简单的方法，并寻找一种在不满足条件时禁用提交的方法。

在文本输入中添加一个
onchange
事件，以删除错误消息

我还将检查是否存在错误消息，而不是对有效字段进行计数。这将使在表单中添加更多字段变得更容易

function checkName(e) {
        //gather the calling elements value
        var val = $(e.target).val();
        //Check length
        if (val.length<1) {
            document.getElementById("errorName").innerHTML = "<span class="errmsg">Don't forget your name.</span>";

        } else if (val.length>40){
            document.getElementById("errorName").innerHTML = "<span class='errmsg'>This doesn't look like a name.</span>";
        //If valid input increment var valid.
        } else {
            document.getElementById("errorName").innerHTML = "";

        }
    }

    function checkEmail(e) {

        var val = $(e.target).val();
        //Check email format validity
        var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        if (!re.test(val)) {
            document.getElementById("errorEmail").innerHTML = "<span class='errmsg'>Please enter a valid email.</span>";
        } else {
            document.getElementById("errorEmail").innerHTML = "";
        }
    }

    function checkMessage(e) {

        var val = $(e.target).val();

        if (val.length<1) {
            document.getElementById("errorMessage").innerHTML = "<span class='errmsg'>It looks like you forgot the message.</span>";

        } else if (val.length>2000) {
            document.getElementById("errorMessage").innerHTML = "<span class='errmsg'>It looks like your message is too long.</span>";

        } else {
            document.getElementById("errorMessage").innerHTML = ""; 
        }

    }


//Contact: jQuery check for null/empty/errors
$(document).ready(function() {

    $('#name').change(checkName);
    $('#email').change(checkEmail);
    $('#message').change(checkMessage);

    function checkSubmit() {
        if ($('form .errmsg').length > 0) {
            document.getElementById("errorSubmit").innerHTML = "";
        }
    }
}

/If errors when submitting display message

$('#form13').submit(function(submit) {
    if ($.trim($("#name").val()) === "" || $.trim($("#email").val()) === "" || $.trim($("#message").val()) === "") {
        document.getElementById("errorSubmit").innerHTML = "<span class='errmsg'>Please fill out all the form fields.</span>";
        submit.preventDefault();
    } else if ($('form .errmsg').length > 0) {
        document.getElementById("errorSubmit").innerHTML = "<span class='errmsg'>Please check the errors above.</span>";
        submit.preventDefault();
    }
  })
});

函数checkName（e）{
//收集调用元素的值
var val=$（e.target）.val（）；
//检查长度
如果（值长度40）{
document.getElementById（“errorName”）.innerHTML=“这看起来不像一个名称。”；
//如果输入有效，则增量变量有效。
}否则{
document.getElementById（“errorName”）.innerHTML=“”；
}
}
功能检查电子邮件（e）{
var val=$（e.target）.val（）；
//检查电子邮件格式的有效性
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
如果（！重新测试（val））{
document.getElementById（“errorEmail”）.innerHTML=“请输入有效的电子邮件。”；
}否则{
document.getElementById（“errorEmail”）.innerHTML=“”；
}
}
功能检查消息（e）{
var val=$（e.target）.val（）；
如果（val.length2000）{
document.getElementById（“errorMessage”）.innerHTML=“看起来您的邮件太长了。”；
}否则{
document.getElementById（“errorMessage”）.innerHTML=“”；
}
}
//联系人：jQuery检查空/空/错误
$（文档）.ready（函数（）{
$（'#name'）。更改（checkName）；
$（'电子邮件'）。更改（检查电子邮件）；
$（'#message'）。更改（checkMessage）；
函数checkSubmit（）{
如果（$（'form.errmsg'）。长度>0）{
document.getElementById（“errorSubmit”）.innerHTML=“”；
}
}
}
/如果错误