javascript - Jquery 表单验证不起作用，未使用插件

Question

我是 Jquery 新手，遇到了一些我无法解决的问题，我认为我需要有更多经验的人。

表单验证无法正常工作，但在 jsfiddle 上工作正常。

我应该有 document.ready 吗？

任何帮助都会非常感谢

      <script>

  $('#add_film').submit(function (e) {

var error = false;

// No value for movie_title
if ($('#movie_title').val() == "") {
    alert("No Film");
    error = true;
}

// No Value for actor
if ($('#leading_name').val() == "") {
    alert("No actor");
    error = true;
}

// No value for rating
if ($('#rating').val() == null) {
    alert("No Rating");
    error = true;
}

//No value for review
if ($('#review').val() == "") {
    alert("No review");
    error = true;
}

// Focus on first form field.
$("input:text:visible:first").focus();

if (error) {
    e.preventDefault();
}

});

</script>




   <form action="add_film.php" method="post" id="add_film">

    <label for="title">Movie Title</label>
    <input type="text" name="movie_title" id="movie_title" />

    <br/>
    <br/>

    <label for="actor">Leading Actor</label>
    <input type="text" name="leading_actor" id="leading_name" />

    <br/>
    <br/>      


    <label for="rating">Rating</label>
    <select id="rating" name="rating"/>
        <option selected="selected" value=0 disabled="disabled">Select a Rating</option>
        <option value="Terrible">Terrible</option>
        <option value="Fair">Fair</option>
        <option value="Ok">Ok</option>
        <option value="Good">Good</option>
        <option value="Excellent">Excellent</option>
    </select>

    <br/>
    <br/>


    <label for="review">Your Review</label>
    <br/>
    <textarea name="review" id="review" rows="15" cols="60"></textarea>

    <br/>
    <br/>

    <input type="submit" name="submit" id="submit" value="submit" />
    <input type="hidden" name="submitted" value="TRUE" />

Answer 1

您尚未关闭表单标记，因此脚本不起作用。

这是适合您的工作代码。

http://jsbin.com/EDOJEZ/1/edit?html,output