CODEWITHSUNDEEP
javascriptjqueryvalidation
user3638575
user3638575

Reputation: 7

jQuery Form validation isn't working, unexpected end of input

I'm creating a simple guestbook, an assignment in which we're specifically asked to use jQuery to validate empty fields. I've been googling for hours to try and find out why my validation isn't working - but I haven't come across any working solution.

However when I use the Chrome debugging-app, I get:

Uncaught SyntaxError: Unexpected end of input - and a red dot shows up in the console window, right before my doctype-declaration.

Could this have anything to do with the validation not working? Relevant pieces of my code follows below.

Form:

<form id="aForm" method="post" action="">

        <ol>
            <li>
                <label for="name">Name:</label> 
                <input type="text" name="name" placeholder="Type your name...">

            </li>
            <li>
                <label for="comment"></label>
                    <br>Message: <br><textarea maxlength="100" name="comment"
                    placeholder="Share a thought..." rows=6 cols=33></textarea>

            </li>
            <li>
                <input type="submit" name="submit" value="Submit your message!">
            </li>
        </ol>

    </form>

With validation at the end of the document (the scripts comes from a trusted plugin):

<script src="js/jquery.js"></script>
<script src="js/validation.js"></script>

<script>
   $(document).ready(function() {
    $.validator.setDefaults({
        submitHandler: function() { alert("Submitted!"); }
    });

    $("#aForm").validate({
        rules: {
             name: { required: true },
             comment: { required: true }
        },
        messages: {
             name: "Please enter your name",
             email: "Please enter a comment"
        }

});

</script>

Upvotes: 0

Views: 244

Answers (4)

user3030212
user3030212

Reputation: 439

Check this out:

<script>
   $(document).ready(function() {
      $.validator.setDefaults({
          submitHandler: function() { alert("Submitted!"); }
      });

      $("#aForm").validate({
         rules: {
             name: { required: true },
             comment: { required: true }
          },
          messages: {
              name: "Please enter your name",
              comment: "Please enter a comment" // email in original code
          }
     }); // missing in original code
});

Upvotes: 0

tsan
tsan

Reputation: 16

I don't know if this is the problem,but try changing this

email: "Please enter a comment"

to this 

comment: "Please enter a comment"

cause there is no email textarea or input.

Upvotes: 0

Alex Angelico
Alex Angelico

Reputation: 4035

you are not closing the parentesis opened at $("#aForm").validate(

The code should be: 

<script>
   $(document).ready(function() {
    $.validator.setDefaults({
        submitHandler: function() { alert("Submitted!"); }
    });

    $("#aForm").validate({
        rules: {
             name: { required: true },
             comment: { required: true }
        },
        messages: {
             name: "Please enter your name",
             email: "Please enter a comment"
        }); //<= added


});

</script>

Upvotes: 1

lamflam
lamflam

Reputation: 281

You're missing the final closing }); Try:

<script>
   $(document).ready(function() {
    $.validator.setDefaults({
        submitHandler: function() { alert("Submitted!"); }
    });

    $("#aForm").validate({
        rules: {
             name: { required: true },
             comment: { required: true }
        },
        messages: {
             name: "Please enter your name",
             email: "Please enter a comment"
        }

    });
 });

</script>

Upvotes: 0

Related Questions