JQuery的提交功能没有验证

Question

所以我一直在为一个类项目的简单脚本。我是一个新的JavaScript学生，所以我给了我一个很难的时间，即使我认为它可以轻松解决。我们提交了表格，我输入了7并得到了“错误答案”，这很好，但是我输入了8（正确答案），并且仍然输出错误的答案。我不知道为什么它不能从8区分其他任何数量的请帮忙

$("#story").submit(function (e) { 
var answer = document.getElementById('human-story'); 


if (answer != 8) { 
    console.log(answer); 
    e.preventDefault();   
}else { 
    alert("right answer"); 
    e.preventDefault(); 
} 
}) 


<form class="form-horizontal contact" name="contact" method="post" action="" id="story"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4>We are excited to hear your story!</h4> 

     </div> 
     <div class="modal-body"> 
     <div class="form-group"> 
      <label for="contact-name" class="col-lg-2 control-label">Name:</label> 
      <div class="col-lg-10"> 
      <input type="text" name="first_name" class="form-control" id="contact-name" placeholder="First & Last Name" required="" > 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="contact-email" class="col-lg-2 control-label">Email:</label> 
      <div class="col-lg-10"> 
      <input type="email" name="email" class="form-control" id="contact-email" placeholder="you@example.com" required=""> 

      </div> 
     </div> 
     <div class="form-group"> 
      <label for="contact-message" class="col-lg-2 control-label">Story:</label> 
      <div class="col-lg-10"> 
      <textarea name="message" rows="8" class="form-control" style="resize:none;" required=""></textarea> 

      </div> 
     </div> 
     <div class="form-group"> 
     <label for="human" class="col-sm-2 control-label">5 + 3 = ?</label> 
     <div class="col-sm-10"> 
      <input type="text" class="form-control" id="human-story" name="human-story" placeholder="Your Answer" required=""> 
     </div> 
    </div> 

     </div> 
     <div class="modal-footer"> 
     <a href="#" class="btn btn-default" data-dismiss="modal">Close</a> 
     <button class="btn btn-success" name="submit-story" type="submit-story" value="Send!">Send</button> 
     </div> 
    </form> 

Answer 1

您有.form-controll类多个字段。使用id属性来定义的字段都为正确答案进行检查：

$("#story").submit(function (e) { 
    e.preventDefault();  
    if ($("#human-story").val() == '8') { 
     alert("right answer"); 
    } else { 
     alert("wrong answer"); 
    } 
}); 

经与form-controll类中的多个元素，使用$(".form-controll").val()，jQuery的返回的第一个元素的值与给定类（在你的情况下，它“name”字段值）。

Answer 2

使用这样

$("#story").submit(function (e) { 

    if ($(".form-control").val() == '8') { 
     alert("right answer");  

    }else { 
     alert("wrong answer"); 

    } 
    e.preventDefault();  
}); 

Answer 3

第一，你可以把e.preventDefault（）;直接在设置变量之前。 所以你只需要写一次。

和y不只是把，如果子句

$("#story").submit(function (e) { 
    e.preventDefault();  
    var answer = parseInt($(".form-control").val(), 10); 

    if (answer == 8) { 
     alert("right answer"); 
    } else { 
     alert("wrong answer"); 
    } 
}); 

看到工作小提琴：

$("#story").submit(function(e) { 
 
    e.preventDefault(); 
 
    var answer = parseInt($(".form-control").val(), 10); 
 

 
    if (answer == 8) { 
 
    alert("right answer"); 
 
    } else { 
 
    alert("wrong answer"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form method="post" id="story"> 
 
    <input name="form--control" type="text" class="form-control" /> 
 
    <input name="submit" type="submit" class="form--submit" /> 
 

 
</form>