Javascript订阅表单验证错误

Javascript Subscribe Form Validation Errors

本文关键字：验证 错误 表单 Javascript      更新时间：2023-09-26

我正在构建一个使用Javascript进行验证的基本订阅表单，但它不能正常工作。

我的表单代码是：

<form id="pageSubscribeForm">
    <div class="pageSubscribeCell">
        <input id="pageSubscribeName" type="text" class="pageSubscribeInput" value="Tell Us Your Name" />
    </div>
    <div class="pageSubscribeCell">
        <input id="pageSubscribeEmail" type="text" class="pageSubscribeInput" value="Add Your Email Address" />
    </div>          
    <div class="pageSubscribeCell hidden">
        <input id="pageSubscribeSpam" type="text" class="pageSubscribeInput" value="" />
    </div>
    <div class="pageSubscribeCell">
        <div class="pageSubscribeButton">
            <div id="pageSubscribeSubmit" class="pageSubscribeAction"></div>
        </div>
    </div>
</form>

验证代码为：

$("#pageSubscribeSubmit").click(function() {
var name = $("#pageSubscribeName").val();
var nameok = 0;
var email = $("#pageSubscribeEmail").val();
var emailok = 0;
var spam = $("#pageSubscribeSpam").val();
var spamok = 0; 
var dataString = 'name='+ name + '&email=' + email + '&spam=' + spam;
if(name!='Tell Us Your Name'){
    nameok = 1
}else{
    $("#pageSubscribeName").removeClass("subscribeSuccess").addClass("subscribeError");
}
if(email!='Add Your Your Email Address'){
    emailok = 1
}else{
    $("#pageSubscribeEmail").removeClass("subscribeSuccess").addClass("subscribeError");
}
if(spam ==''){
    spamok = 1
}else{
    $("#pageSubscribeSpam").removeClass("subscribeSuccess").addClass("subscribeError");
}
if(nameok == 1 && emailok == 1 && spamok == 1){
    $('#pageSubscribeSubmit').hide();
}

当我点击submit链接时，我会将错误类添加到我的Name单元格中，但电子邮件单元格保持不变，垃圾邮件单元格保持隐藏。有什么想法为什么或如何修复吗？

您的电子邮件字段没有得到错误类，因为您的测试检查了错误的文本（2x"Your"）：

if(email!='Add Your Your Email Address'){

你还问为什么"…垃圾邮件单元格保持隐藏…"。你发布的代码中没有任何内容可以从#pageSubscribeSpam周围的div中删除.hidden类。假设你的.hidden类按照它的建议执行，那么#pageSubscribeSpam输入在页面加载时是隐藏的。用户无法输入值，因此当单击按钮时，其值仍然为"。所以spamok = 1，永远不会添加.subscribeError类。

要修复您的代码，请删除测试中的第二个"YOUR"

if（电子邮件！="添加您的电子邮件地址"）｛

为了避免这样的问题，我强烈建议像这样的工作

$(function() {
  $("#pageSubscribeSubmit").on("click", function() {
    var name = $.trim($("#pageSubscribeName").val());
    var email = $.trim($("#pageSubscribeEmail").val());
    var spam = $("#pageSubscribeSpam").val();
    var dataString = 'name=' + name + '&email=' + email + '&spam=' + spam;
    $("#pageSubscribeName").toggleClass("pageSubscribeError", name == "");
    $("#pageSubscribeEmail").toggleClass("pageSubscribeError", email == "");
    var spamok = spam == $("#pageSubscribeSpam").get(0).defaultValue; // nothing changed
    $("#pageSubscribeSpam").toggle(!spamok);
    if (spamok && $(".pageSubscribeError").length == 0) { // no errors
      $('#pageSubscribeSubmit').hide();
      $.ajax({
        type: "POST",
        url: "php/subscribe.php",
        data: dataString,
        success: function() {
          $('#pageSubscribeSubmit').slideUp();
        }
      });
    }
  });
});
.pageSubscribeError { border:1px solid red }
#pageSubscribeSpam { display:none }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="pageSubscribeForm">
  <div class="pageSubscribeCell">
    <input id="pageSubscribeName" type="text" class="pageSubscribeInput" value="" placeholder="Tell Us Your Name" />
  </div>
  <div class="pageSubscribeCell">
    <input id="pageSubscribeEmail" type="text" class="pageSubscribeInput" value="" placeholder="Add Your E-Mail Address" />
  </div>
  <div class="pageSubscribeCell hidden">
    <input id="pageSubscribeSpam" type="text" class="pageSubscribeInput" value="khujh" />
  </div>
  <div class="pageSubscribeCell">
    <div class="pageSubscribeButton">
      <div id="pageSubscribeSubmit" class="pageSubscribeAction">Submit</div>
    </div>
  </div>
</form>

相关文章：