Parsley Form Validation Error

Question

Okay,

I'm still a javascript student so I need some help. I'm using parsley.js for form validation and then jquery ajax to submit the form. I keep getting this luke warm message in the console to bind parsley to an existing element. I've followed all the instructions but continue to get a warning.

How can I get rid of the warning?

Code can be seen here: http://madmen6raphics.com/clients/marble/

thanks in advance.

Here is the code:

HTML:

<form action='mail_form.php' data-parsley-validate id='newsletter_signup' method='post' name='newsletter_signup' novalidate>
            <fieldset>
              <legend>Joing our mailing list!</legend>
              <label for='name'>name:</label>
              <input data-parsley-minlength='5' id='name' name='name' placeholder='John Doe' required type='text'>
              <label for='email'>email:</label>
              <input id='email' name='email' placeholder='[email protected]' required type='email'>
              <input name='Submit' type='submit'>
            </fieldset>
          </form>

javascript:

$('#newsletter_signup').parsley();

Answer 1

You are getting two errors of

You must bind Parsley on an existing element.

but those errors are not related to the code you posted.

In your ...js/site.js you have the following code:

$(document).ready(function() {
    $('.slider').flexslider({controlNav: false,slideshowSpeed: 3000,directionNav: true});
    $('input').iCheck({checkboxClass: 'icheckbox_square-yellow',radioClass: 'iradio_square-yellow',increaseArea: '20%'});
    $('#newsletter_signup').parsley();
    $('#request_a_quote').parsley();
    $('#contact').parsley();
    var form = $('#newsletter_signup');
    (...)

You are binding parsley to three elements with the following ids: newsletter_signup, request_a_quote and contact.

The thing is, in the current page you only have the element newsletter_signup. If you do a console.log($('#request_a_quote')) you will see an empty object.

So, to fix your issue, you need to remove the code that binds parsley to non-existent elements. Or you could change your code in order to bind parsley only if the element exist. Something like this:

$(document).ready(function() {
    $('.slider').flexslider({controlNav: false,slideshowSpeed: 3000,directionNav: true});
    $('input').iCheck({checkboxClass: 'icheckbox_square-yellow',radioClass: 'iradio_square-yellow',increaseArea: '20%'});
    if ($('#newsletter_signup').length > 0 )
        $('#newsletter_signup').parsley();
    if ($('#request_a_quote').length > 0 )
        $('#request_a_quote').parsley();
    if ($('#contact').length > 0 )
        $('#contact').parsley();
    var form = $('#newsletter_signup');
    (...)