CODEWITHSUNDEEP
javascriptjqueryvalidation
user1829823
user1829823

Reputation: 375

Jquery form validation not working no plugin used

I'm new to Jquery and came across something I can not solve think I need someone who with a little more experience.

Form validation is not working correctly but works fine on jsfiddle.

Am I suppose to have document.ready ?

Any help would be great thanks

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

Upvotes: 0

Views: 884

Answers (3)

defau1t
defau1t

Reputation: 10619

You had not closed your form tag, so the script doesn't work.

Here is the working code for you.

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

Upvotes: 2

Nishad K Ahamed
Nishad K Ahamed

Reputation: 1394

you please run your web page in google chrome and press ctrl+shift+j to open developer console. So that you could see the javascript/jquery errors with line numbers+preview there and try to resolve yourself. I promise, you can do it as simple.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388436

Yes!!! the code should be in document ready handler

jQuery(function($){

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

Upvotes: 0

Related Questions