堆栈内存溢出
  繁体   English   中英

提交时进行JavaScript表单验证。

[英]JavaScript form validation on submit.

 原文  2014-06-02 16:24:00  2   5    javascript/ jquery/ html/ validation

问题描述

我对JavaScript表单验证有一点问题。 我希望仅在用户单击提交后显示验证错误。

现在，当您在任何输入字段中键入内容时，就会进行验证。

例：

HTML： 

<form id="contact_form" method="post">

    <li>
        <input type="text" placeholder="Name" name="name">
    </li>
    <li>
        <input type="text" placeholder="E-mail" name="email">
    </li>
    <li>
        <input type="text" placeholder="Subject" name="subject">
    </li>
    <li>
        <textarea type="text" placeholder="Message" name="message"></textarea>
    </li>
    <li>
        <input type="submit" name="submit" value="Send" class="send-button">
    </li>
</form>
<div class="validate-error"></div>

JavaScript的： 

$(function() {

  $('#contact_form').validate({
    errorElement: 'div',
    errorClass: 'validate-error',
    focusInvalid: false,
        rules: {
            name: 'required',
            email: {
                required: true,
                email: true
            },
            subject: {
                required: true,
                minlength: 5
            },
            message: {
                required: true
            }
        },
        showErrors: function(errorMap, errorList) {
            $(".validate-error").html("All fields must be completed before you submit the form.");
        }
    }); 
});

http://jsfiddle.net/ZrfhU/215/

5 个解决方案

解决方案1
 1 已采纳  2014-06-02 16:36:26

将您的代码放入函数中，然后单击按钮触发函数，如下所示： 

function validate() {
    // your code
}

$(".send-button").click(function() {
    validate();
});

查看演示： http : //jsfiddle.net/ZrfhU/217/

解决方案2
 0  2014-06-02 16:34:19

尝试这个

http://jsfiddle.net/ZrfhU/216/ 

$('.send-button').click(function(){

如果您只想在点击期间进行验证。

请记住，禁用了Java脚本的人不会进行任何形式的验证

解决方案3
 0  2014-06-02 16:59:41

假设您正在使用此jQuery表单验证插件 ，则需要在onfocusout .validate()对象中将onkeyup和onfocusout设置为false 。 默认情况下，它将在每次触发这两个事件时验证您的表单。 

$('#contact_form').validate({

    onkeyup:false,
    onfocusout:false,

    errorElement: 'div',
    errorClass: 'validate-error',
    focusInvalid: false,
    rules: {
        name: 'required',
        email: {
            required: true,
            email: true
        },
        subject: {
            required: true,
            minlength: 5
        },
        message: {
            required: true
        }
    },
    showErrors: function(errorMap, errorList) {
        $(".validate-error").html("All fields must be completed before you submit the form.");
    }
});

解决方案4
 0  2017-10-28 06:19:55

function validateForm() {

    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    var name = document.myForm.name.value;

    if (name == "") {
        document.getElementById("errormsg").innerHTML = "Name must be filled out";
        document.getElementById("errormsg").style.display = "block";
        return false;
    } else if (email == "") {
        document.getElementById("errormsg5").innerHTML = "Email Id must be filled out";
        document.getElementById("errormsg5").style.display = "block";
        return false;
    } else if (!email.match(mailformat)) {
        document.getElementById("errormsg5").innerHTML = "Please provide a valid email address";
        document.getElementById("errormsg5").style.display = "block";
        return false;
    }

}

https://jsfiddle.net/Ritu001/kc2o3eb8/1/

解决方案5
 0  2018-01-06 14:00:20

 <head> <link rel="stylesheet" type="text/css" href="css/cssapply.css"> <style type="text/css"> .error{ color:darkgreen;} </style> </head> <body> <form name="loginformjs" action="" onSubmit="return validate()" method="post"> <table border="1" padding="2" cellpadding="2" width="20%" bgcolor="lightblue" align="center" cellspacing="2"> <tr> <td colspan=2> <center><font size=4><p style="color: darkorange"><marquee direction="left" behavior="alternate" style="border:solid olive">Student Registration Form</marquee></p></font></center> </td> </tr> <tr> <td><p style="color: yellow">Firstname</p></td> <td><p class="error"><input type="text" name="firstname" id="textname" size="20" value=""></p> <span id ="error_firstname" class="error"></span></td> </tr> <tr> <td><p style="color: orange">Lastname<html> me</p></td> <td><p class="error"><input type="text" name="lastname" id="textname" size="20" value=""></p> <span id ="error_lastname" class="error"></span></td> </tr> <tr> <tr> <td><p style="color: yellow">Address</p></td> <td><p class="error"><input type="text" name="address" id="address" size="20"></p> <span id ="error_address" class="error"></span></td> </tr> <tr> <td><p style="color: orange"> Gender</p></td> <td><input type="radio" name="gender" value="male" size="10" checked="checked">Male <input type="radio" name="gender" value="Female" size="10">Female </td> </tr> <tr> <td><p style="color: yellow">City</td> <td><p class="error"><select name="city"> <option value="0" selected>select city</option> <option value="New Delhi">NEW DELHI</option> <option value="Mumbai">MUMBAI</option> <option value="Goa">GOA</option> <option value="Patna">PATNA</option> </select></p> <span id ="error_city" class="error"></span></td> </tr> <tr> <td><p style="color: orange">State</p></td> <td><p class="error"><select Name="state" > <option value="0" selected><p style="color: green">select state</p></option> <option value="New Delhi">NEW DELHI</option> <option value="Mumbai">MUMBAI</option> <option value="Goa">GOA</option> <option value="Bihar">BIHAR</option> </select></p> <span id ="error_state" class="error"></span></td> </tr> <tr> <td><p style="color: yellow">Course</p></td> <td><p class="error"><select name="course"> <option value="0" selected><p style="color: green">select course</p></option> <option value="B.Tech">BE</option> <option value="MCA">MCA</option> <option value="MBA">MBA</option> <option value="BCA">BCA</option> </select></p> <span id ="error_course" class="error"></span></td> </tr> <tr> <td><p style="color: orange">PinCode</p></td> <td><p class="error"><input type="text" name="pincode" id="pincode" size="20"></p> <span id ="error_pincode" class="error"></span></td> </tr> <tr> <td><p style="color: yellow">EmailId</p></td> <td><p class="error"><input type="text" name="emailid" id="emailid" size="20"></p> <span id ="error_emailid" class="error"></span></td> </tr> <tr> <td><p style="color: orange">DOB</p></td> <td><p class="error"><input type="text" name="dob" id="dob" size="20"></p> <span id ="error_dob" class="error"></span></td> </tr> <tr> <td><p style="color: yellow">MobileNo</p></td> <td><p class="error"><input type="text" name="mobileno" id="mobileno" size="20"></p> <span id ="error_mobileno" class="error"></span></td> </tr> <tr><p style="color: orange"><td> <p class="error"> <input type="file" name="pic" accept="image/*"></p> <span id ="error_pic" class="error"></span></p></td></tr> <tr> <td colspan="1"><input type="submit" value="Submit Form" color="red"></td> <td><input type="reset"></td> </tr> </table> </form> </body> </html> <script type="text/javascript"> function validate() { var err=0; var a = document.forms["loginformjs"]["firstname"].value; if (a == "") { //alert("please the enter firstname "); document.getElementById("error_firstname").innerHTML = "enter the firstname"; err++; } else if(!/^[a-zA-Z]*$/g.test(document.loginformjs.firstname.value)) { //alert("hello"); document.getElementById('error_firstname').innerHTML="only alphanumeric character required"; document.loginformjs.firstname.focus(); return false; } else{ document.getElementById("error_firstname").innerHTML = ""; } //alert("hello"); var b = document.forms["loginformjs"]["lastname"].value; if (b == "") { //alert("please the enter lastname"); document.getElementById("error_lastname").innerHTML = "enter the last name"; err++; } else if(!/^[a-zA-Z]*$/g.test(document.loginformjs.lastname.value)) { document.getElementById('error_lastname').innerHTML="only alphanumeric character required"; document.loginformjs.lastname.focus(); return false; } else{ document.getElementById("error_lastname").innerHTML = ""; } var c = document.forms["loginformjs"]["address"].value; if (c == "") { // alert("please the enter address"); document.getElementById("error_address").innerHTML = "enter the address"; err++; } else if(!/^[0-9,./\\-_ a-zA-Z''\\s a-zA-Z0-9]*$/g.test(document.loginformjs.address.value)) { document.getElementById('error_address').innerHTML="both digit and character required"; document.loginformjs.address.focus(); return false; } else{ document.getElementById("error_address").innerHTML = ""; } var e = document.forms["loginformjs"]["city"].value; if (e == "0") { //alert("please the city "); document.getElementById("error_city").innerHTML = "select city"; err++; } else{ document.getElementById("error_city").innerHTML = ""; } var f = document.forms["loginformjs"]["state"].value; if (f == "0") { //alert("please the enter state "); document.getElementById("error_state").innerHTML = "select state"; err++; } else { document.getElementById("error_state").innerHTML = ""; } var g = document.forms["loginformjs"]["course"].value; if (g == "0") { //alert("please the enter course "); document.getElementById("error_course").innerHTML = "select course"; err++; } else{ document.getElementById("error_course").innerHTML = ""; } var h = document.forms["loginformjs"]["pincode"].value; if (h == "") { //alert("please the enter pincode "); document.getElementById("error_pincode").innerHTML = "enter the pincode"; err++; } else if(!/^[1-9][0-9]{5}$/g.test(document.loginformjs.pincode.value)) { document.getElementById('error_pincode').innerHTML="at least require six digit "; document.loginformjs.pincode.focus(); return false; } else{ document.getElementById("error_pincode").innerHTML = ""; } var j = document.forms["loginformjs"]["dob"].value; if (j == "") { document.getElementById("error_dob").innerHTML = "enter your dob"; err++; } else if(!/^(\\d{1,2})-(\\d{1,2})-(\\d{4})$/g.test(document.loginformjs.dob.value)) { document.getElementById('error_dob').innerHTML="enter valid dob with - format"; document.loginformjs.dob.focus(); return false; } else { document.getElementById("error_dob").innerHTML = ""; } var k = document.forms["loginformjs"]["mobileno"].value; if (k == "") { //alert("please the enter mobileno"); document.getElementById("error_mobileno").innerHTML = "enter your mobileno"; err++; } else if(!/^([0|\\+[0-9]{1,5})?([7-9][0-9]{9})$/g.test(document.loginformjs.mobileno.value)) { document.getElementById('error_mobileno').innerHTML="no start with 7,8,9 must contain"; document.loginformjs.mobileno.focus(); return false; } else{ document.getElementById("error_mobileno").innerHTML = ""; } var l = document.forms["loginformjs"]["pic"].value; if (l == "") { //alert("please the enter image"); document.getElementById("error_pic").innerHTML = "enter the image"; err++; } else if(!/(\\.(gif|jpg|jpeg|tiff|png))$/g.test(document.loginformjs.pic.value)) { document.getElementById('error_pic').innerHTML="jpg,png,etc must contain"; document.loginformjs.pic.focus(); return false; } else{ document.getElementById("error_image").innerHTML = ""; } if(err!=0){ return false; } } </script>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 JavaScript表单验证-函数未在提交时运行。 HTML 和 Javascript：表单不会提交。 表单提交后，Javascript重定向不起作用。 ASP经典，JavaScript <FORM> 如果未选中任何复选框，请提醒！ .. ELSE ..提交。 （JavaScript）的 Django，Javascript：通过javascript innerHtml注入DOM的表单在提交时崩溃谷歌浏览器选项卡。 适用于IE 提交JavaScript表单验证 .submit（）和JavaScript中的表单验证 JavaScript表单验证提交错误 Javascript / jQuery提交表单验证 使用javascript提交表单验证
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM