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>