Question

我正在构建一个使用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链接时，我将错误类添加到我的名称单元格中，但电子邮件单元格保持不变，垃圾邮件单元格保持隐藏状态。任何想法为什么或如何解决？

Answer 1

要修复您的代码，请删除第二个＆＃34;您的＆＃34;在测试中

if（email！=＆＃39;添加您的电子邮件地址＆＃39;）{

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

＆＃13;

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

＆＃13;

.pageSubscribeError { border:1px solid red }
#pageSubscribeSpam { display:none }

＆＃13;

<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>

＆＃13;

Answer 2

您的电子邮件字段未获取错误类，因为您的测试检查错误的文本（2x'Your'）：

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

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

Javascript订阅表单验证错误

2 个答案: