javascript - jQuery 验证正在重复 else 语句 |验证完成后，将不会打印值

Question

所以我正在验证一个表单 - 验证工作正常，但如果用户出现错误，则会 .after一个<p></p>错误信息。但如果用户单击 button它会不止一次地继续打印 .after错误信息!

我已经尝试了一切 - 这包括在 if 语句中放置一个 bool 表达式，以及一次 .after打印错误消息将使该表达式 false所以 if 语句不会再次运行。这对我不起作用。

验证完成后我也无法打印出值!？

为了尝试解决这个问题，我尝试将验证包装在 if 中。测试验证是否为 true 的语句然后在 if 的底部validation 之后的声明我做到了boolean值转到false然后我有一个 else 语句打印出 values对于每个输入...这对我不起作用!

jQuery:

// JavaScript Document
$(document).ready(function() {

    //Submit the form for validation
$('#submit').click(function () 
{



        //Get the values from input fields:
        $name = $('#txtName').val();
        $age = $('#numAge').val();
        //Sex:
        $sex = $('sex').val();
        //Email:
        $email = $('#txtEmail').val();
        $confirmEmail = $('#txtConfirmEmail').val();

        //Checkbox
        $("input[name='interest']:checked").each(function() {
                $gender += "" + $(this).val() + ", ";
        });

        //Fish varieties:
        $varieties = $('#txtVariety').val();

        //Put checkbox values into an Array
        var values = $('input:[name="interest[]"]:checked').map(function () {
            return this.value;
    }).get(); 

        //printDetails is the id to print out to.
    for(var i=0; i<values.length;i++){
                alert(values[i]);

    }

    //Start Validation
        if($name.length < 5){
                $('#txtName').focus();  
                $('#txtName').val("");
                $('#txtName').after("<p id='after1' style='color:red;'><strong>Enter a name greater than 5 letters!</strong></p>");
                return false;
            }
            else{
                $('p').remove('#after1');   
                $name = $('#txtName').val();

            }
            if($age.length > 105 || $age.length < 1){
                $('#numAge').focus();   
                $('#numAge').val("");
                $('#numAge').after("<p id='after2' style='color:red;'><strong>Enter an Age less than 106 and greater than 0!</strong></p>");
                return false;
            }
            else{
                $('p').remove('#after2');

            }

            function isValidEmailAddress($email) {
                var pattern = new RegExp(/^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i);
                // alert( pattern.test(emailAddress) );
                return pattern.test($email);
    };
        if(!isValidEmailAddress($email)){
            $('#txtEmail').focus();
            $('#txtEmail').after("<p id='after3' style='color:red;'><strong>Enter a valid email - <span style='color:#0078ab;'>"+ $email +"</span> - Is not valid</strong></p>");
            $('#txtEmail').val(""); 
            return false;

        }
        else{
            $('p').remove('#after3');   
            //Now check if the email is successfully confirmed
                if($email != $confirmEmail){
                    $('#txtConfirmEmail').focus();
                    $('#txtConfirmEmail').after("<p id='after4' style='color:red;'><strong>Your email - <span style='color:#0078ab;'>"+ $confirmEmail +"</span> - Does not match!</strong></p>");
                    $('#txtConfirmEmail').val("");  
                    return false;
                }
                else{
                    $('p').remove('#after4');
                }

            }

        //Check if there is atleast 1 checkbox checked
        if($('input[type=checkbox:checked').length < 1) {
            $('#checkboxError').html('<p id="after5" style="color:red;" id="after5">Please check atleast one checkbox</p>');
            return false;
        }
        else{
            //This should remove the above error message! 
            $('p').remove('#after5');
        }

    //These won't work?
    document.getElementById("printDetails").innerHTML = $name + $age + $gender + $sex + $varieties + $email;
    $("#printDetails").html("<div>" + $name + $age + $gender + $sex + $varieties + $email + " </div");


}); //END OF ONCLICK




}); //End of document.ready

HTML

<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Register jQuery</h1>
    </div>
    <div data-role="content">

    <!-- Name, Age -->
      <div data-role="fieldcontain">
        <label for="txtName">Name:</label>
        <input type="text" name="txtName" id="txtName" value=""  />
      </div>
      <div data-role="fieldcontain">
        <label for="numAge">Age:</label>
        <input type="number" name="numAge" id="numAge" value=""  />
      </div>

      <!-- Sex, Default value = Male-->
      <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal">
          <legend>Sex</legend>
          <input type="radio" name="sex" id="sex_male" value=""  />
          <label for="sex_male">Male</label>
          <input type="radio" name="sex" id="sex_female" value="" checked='checked' />
          <label for="sex_female">Female</label>
        </fieldset>
      </div>

      <!-- Emails -->
      <div data-role="fieldcontain">
        <label for="txtEmail">e-mail:</label>
        <input type="email" name="txtEmail" id="txtEmail" value=""  />
      </div>
      <div data-role="fieldcontain">
        <label for="txtConfirmEmail">Confirm e-mail:</label>
        <input type="email" name="txtConfirmEmail" id="txtConfirmEmail" value=""  />
      </div>

      <!-- Interest In checkboxes -->
      <div data-role="fieldcontain">
        <fieldset data-role="controlgroup">
          <legend>I am interested in the following</legend>
          <input type="checkbox" name="interest[]" value='Comet' id="interest_0" class="custom" value="" />
          <label for="interest_0">Comet</label>
          <input type="checkbox" name="interest[]" value='Common Goldfish' id="interest_1" class="custom" value="" />
          <label for="interest_1">Common Goldfish</label>
          <input type="checkbox" name="interest[]" id="interest_2" class="custom" value="Black Moor" />
          <label for="interest_2">Black Moor</label>
          <input type="checkbox" name="interest[]" value='Celestial Eye' id="interest_3" class="custom" value="" />
          <label for="interest_3">Celestial Eye</label>
          <input type="checkbox" name="interest[]" value='Fantail' id="interest_4" class="custom" value="" />
          <label for="interest_4">Fantail</label>
          <input type="checkbox" name="interest[]" value='Lionchu' id="interest_5" class="custom" value="" />
          <label for="interest_5">Lionchu</label>
          <input type="checkbox" name="interest[]" value='Other'  id="interest_6" class="custom" value="" />
          <label for="interest_6">Other</label>
        </fieldset>
      </div>
      <div data-role="fieldcontain" class='display'>
        <label for="txtVariety">Fish Varieties:</label>
        <textarea cols="40" rows="8" name="txtVariety" id="txtVariety"></textarea>
      </div>
                <p id='checkboxError'></p>


      <!-- Text Area - Fish Varieties -->


      <!-- Drop down select menu - How did u hear about us -->
      <div data-role="fieldcontain">
        <label for="selectmenu" class="select">How did you hear about us?:</label>
        <select name="selectmenu" id="selectmenu">
          <option value="Internet">Internet</option>
          <option value="Email">Email</option>
          <option value="Friend">Friend</option>
          <option value="Billboard">Billboard</option>
          <option value="Other">Other</option>
        </select>
      </div>

      <!-- Register & Start again buttons -->
      <input type="submit" id='submit' value="Register"/>
      <input type="submit" id='resetForm' value="Start Again" />
        <!-- Print out the details -->      
        <div id='printDetails'></div>

我感觉这段代码应该可以工作 - 希望有人能看到我的问题'，

Answer 1

好吧，在检查了你的 fiddle 之后，我想我只需进行最少的代码更改就可以使用它。

主要是将提交按钮事件开始时的 bool 值 isValid 设置为 true 并在失败时设置为 false验证测试。然后仅在表单有效时显示您的输出。

Demo

此外，一些 jQuery 选择器不正确，我认为性别和性别之间存在一些混淆。它们是同一件事，只是不同的说法。

仍有很大的改进空间，但这看起来像是一项家庭作业，所以我可以告诉你也许仍在学习。