如果提交，确认电子邮件不会删除验证消息，但表单的其他元素需要完成

Question

当我尝试验证电子邮件时，我的 javascript 遇到了一些问题。验证本身工作正常，但它是我遇到问题的消息。

基本上，如果用户在电子邮件字段中输入了不正确的电子邮件格式，并且在确认电子邮件中输入了不匹配的电子邮件，它会显示两个字段的验证，这很好。

如果我随后输入了有效的电子邮件但仍然不匹配，则会删除电子邮件验证并保留确认密码验证，这也很棒。

但是假设我修复了确认密码并提交了，但我没有完成表单中的所有组件，我至少希望确认电子邮件验证消息会消失，因为它是正确的，但它仍然存在。当我完成所有表单并提交时，表单会通过，但是如果用户尝试提交并且要完成表单的其他区域但不必担心确认电子邮件，则只是此消息应该消失。

是什么导致此消息保留而所有其他字段都需要有效？

 function validateEmail(email) {

      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,}))$/;

      return re.test(email);

    }

    

    function validate() {

      var $result = $("#resultEmail");

      var $confirmResult = $("#resultConfirmEmail");

      var email = $("#email").val();

      var confirmEmail = $("#confirmEmail").val();

      $result.text("");

    

      if (validateEmail(email)) {

        if (email == confirmEmail) {

          return true;

      } else {

        $confirmResult.text("Your email and confirm email do not match");

        $confirmResult.css("color", "red");

      }

        } else {

        $result.text(email + " is not a valid email address");

        $result.css("color", "red");

    

        }

    

      return false;

    }

    

    $(".buynow").on("click", validate);

    

      

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="tcform">

    

          <p>

            <b>Attach your CV:</b> (.doc, .docx, .pdf, .txt, .rtf)

            </p>

    

            <input type="file" id="uploadCV"  />

    

            <br/><br/>

    

            <div class="formcontainer">

            <label for="email"><b>Email:</b></label>

            <input type="input" id="email" name="email" required />

    

            <p id="resultEmail"></p>

    

            <br/><br/>

            <label for="email"><b>Confirm Email:</b></label>

            <input type="input" id="confirmEmail" name="confirmEmail" required />

            </button>

</form>

Answer 1

如果你在它之前添加return true;它应该被修复。$confirmResult.text("");

Answer 2

我认为如果您使用 jquery 验证库，它将很容易解决您的问题。https://jqueryvalidation.org/documentation/这是确认密码的示例。<script>&nbsp; &nbsp; function validatePassword() {&nbsp; &nbsp; &nbsp; &nbsp; var validator = $("#loginForm").validate({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rules: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; password: "required",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; confirmpassword: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; equalTo: "#password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; messages: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; password: " Enter Password",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; confirmpassword: " Enter Confirm Password Same as Password"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; if (validator.form()) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert('Sucess');&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</script><form method="post" id="loginForm" name="loginForm">&nbsp; &nbsp; &nbsp; &nbsp; <table cellpadding="0" border="1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Password</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input tabindex="1" size="40" type="password" name="password" id="password" /></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Confirm Password</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input tabindex="1" size="40" type="password" name="confirmpassword" id="confirmpassword" /></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td colspan="2" align="center"><input tabindex="3" type="button" value="Submit" onClick="validatePassword();" /></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp;</form>