Question

为了提高我的jquery技能，我决定创建一个表单并验证它。一切正常，但是当我提交表单时，我只收到我创建的错误消息之一。如果我尝试提交一个空白表单，我应该收到所有错误消息，为什么它会在显示第一条错误消息后停止？这是我在这里问过的第一个问题所以请原谅在这个问题上发布的任何损坏的代码。

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="js/styles.js"></script>
<title>Form Submit Test</title>
</head>
<body>
<div id="wrapper">
<div class="form_errors">
</div><!--close form_errors-->
<form action="confirmation.html" method="post">
    <table border="0" cellspacing="10" cellpadding="10" align="center" bgcolor="">
        <tbody>
            <tr>
                <td width="100" style="" align="left">
                    User Name
                </td>
                <td width="170" style="" align="left">
                    <input type="text" name="first_name" value="First" id="first_name"/>
                </td>
            </tr>
                <td colspan="1" style="" align="left"></td>
                <td colspan="1" style="" align="left">
                    <input type="text" name="last_name" value="Last" id="last_name"/>
                </td>                   
            </tr>
            <tr>
                <td colspan="1" style="" align="left">
                    Car Make
                </td>
                <td colspan="1" style="" align="left">
                    <select name="car_make" id="car_make">
                        <option>Choose a make</option>
                        <option value="ford">Ford</option>
                        <option value="mercury">Mercury</option>
                        <option value="lincoln">Lincoln</option>
                        <option value="oldsmobile">Oldsmobile</option>
                        <option value="toyota">Toyota</option>
                        <option value="honda">Honda</option>
                        <option value="lexus">Lexus</option>
                    </select>
                </td>
            </tr>                       
            <tr>
                <td colspan="1" style="" align="left">
                    Year
                </td>
                <td colspan="1" style="">
                    <select name="car_year" id="car_year">
                        <option>Choose a year</option>
                        <option value="1990">1990</option>
                        <option value="1991">1991</option>
                        <option value="1992">1992</option>
                        <option value="1993">1993</option>
                        <option value="1994">1994</option>
                        <option value="1995">1995</option>
                        <option value="1996">1996</option>
                        <option value="1997">1997</option>
                        <option value="1998">1998</option>
                        <option value="1999">1999</option>
                        <option value="2000">2000</option>
                        <option value="2001">2001</option>
                        <option value="2002">2002</option>
                        <option value="2003">2003</option>
                        <option value="2004">2004</option>
                        <option value="2005">2005</option>
                        <option value="2006">2006</option>
                        <option value="2007">2007</option>
                        <option value="2008">2008</option>
                        <option value="2009">2009</option>
                        <option value="2010">2010</option>
                        <option value="2011">2011</option>
                    </select>
                </td>
            </tr>       
            <tr>
                <td colspan="1">
                    Select Service
                </td>
                <td colspan="1">
                    <input type="radio" name="service[]" value="quote" class="radio"/> Quote
                </td>
            </tr>   
            <tr>
                <td colspan="1"></td>
                <td colspan="1">
                    <input type="radio" name="service[]" value="pick-up" class="radio"/> Pick Up Car
                </td>
            </tr>
            <tr>
                <td colspan="1"></td>
                <td colspan="1">
                    <input type="radio" name="service[]" value="drop-off" class="radio"/> Drop Off Car
                </td>
            </tr>   
            <tr>
                <td colspan="1"></td>               
                <td colspan="1">
                    <input type="submit" value="Submit" id="submit"/>
                    <input type="reset" value="Reset" id="reset"/>
                </td>
            </tr>
        <!--close tbody-->
        </tbody>
    <!--close table-->
    </table>
</form>
</div>
<!--close wrapper-->
</body>
</html>

jquery的：

$(document).ready(function(){
//custom input toggle function
 jQuery.fn.inputtoggle = function(){
  $(this).each(function(index){ 
    var myvalue = $(this).attr("value"); 
    $(this).focusin(function(){
      if($(this).val() == myvalue)
      $(this).val("");
    });  
    $(this).focusout(function(){
      if($(this).val() === "")
      $(this).val(myvalue);
    });
  });    
};
//use custom function on inputs
$("input[type=text]").inputtoggle();      

//style first td in ever tr and add 'td-style' class
$("form table td:first-child").addClass('td-style');    

//hide .form_errors div by default
$(".form_errors").hide();
$("#reset").click(function(){
    $(".form_errors").empty().hide();
});
$("form").submit(function(e){
    /*RADIO BUTTON VALIDATION*/
    //check to see if radio buttons have been checked
    if($("input[type=radio]:checked").val()){
        //if valid, removes content from .form_errors div in case the radio button was previously invalid
        $(".form_errors").empty().hide();
        //prevents div content from flickering and disappearing. 
        //the default action for the input is to submit and post to the next page
        //http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false
    } else{
        $(".form_errors").show().append('<p>Radio button is NOT checked.</p>');
        return false;
    }

    /*FIRST NAME VALIDATION*/

    if($("#first_name").val() == 'First'){
        $(".form_errors").show().append('<p>Please enter your first name.</p>');
        return false;
    }

    var firstName = $("#first_name").val();
    var validName = /[A-Za-z]/;
    if(!validName.test(firstName)){
        $(".form_errors").show().append('<p>You may only enter letters.</p>');
        return false;
    }

    /*FIRST NAME VALIDATION*/

    if($("#last_name").val() == 'Last'){
        $(".form_errors").show().append('<p>Please enter your last name.</p>');
        return false;
    }

    var lastName = $("#last_name").val();
    var validName = /[A-Za-z]/;
    if(!validName.test(lastName)){
        $(".form_errors").show().append('<p>You may only enter letters.</p>');
        return false;
    }
//close form submit
});
//close jquery
});

Answer 1

在第一条错误消息后停止，因为您“返回false”。 “return”停止执行当前函数

Answer 2

简而言之，如果您查看if语句，则在每次检查后使用“return false”。这样，表单就会阻止自己提交自身，但这也会阻止执行流程并直接从满足条件的“if”块中退出整个方法。这就是为什么只有第一次检查，无论哪种检查按其在代码中组织的顺序触发，都在执行。

jquery表单字段自定义消息

2 个答案: