Can’t return false on form

3 Views

So here is my issue.

I’m developing with WordPress and using a plugin to manage a hotel booking process.

Read More

The form is generated and has no classes/ids on so I’m having to locate it via jQuery. 

jQuery(document).on('ready', function(){
    // Clicking on submit button 
    jQuery('.booking-buttons input[type="submit"]').on('click', function( evt ) {
        if ( validation() ) {
            console.log('yes');
            return true;
        } else {
            console.log('no');
            evt.preventDefault();
            return false;
        }
    });

    validation = function() {
        // if fields validate 
            // return true
        // else
            // return false
        // return false
    }

});

I’ve also tried various onsubmit/click variations and the form still submits no matter what, the code has also been placed before and after the plugins JS includes and still no joy.

An interesting thing as well, it works in Chrome Canary but nothing else.

Has anyone else had an issue like this and have any guidance?

Thanks

Post Views: 3

Related posts

Leave a Reply

3 comments

  1. You could simply use in your HTML:

    <form onsubmit="return validation()">

    Or if you really want to use jQuery:

    $("form").submit(function(){return validation();});

  2. <script type="text/javascript">
    function validateForm() {
        var x = document.getElementById('test').value;
        if (x == null || x == 0 || x == "0") {
            alert("Stop");
        }
        else
            document.form.submit();
    }
</script>

    check but i am not rewrite your code .. i used it from my project that i give you as a example

  3. Try attach to the form submit event instead:

    // Shorter DOM ready with local $ for shorter/standard jQuery code
jQuery(function($){
    // Clicking on submit button 
    $('.booking-buttons').closest('form').submit(function( evt ) {
        if ( validation() ) {
            console.log('yes');
            return true;
        } else {
            console.log('no');
            evt.preventDefault();
            return false;
        }
    });

    validation = function() {
        // if fields validate 
            // return true
        // else
            // return false
        // return false
    }

});

    Based on your comments: As it is in a DOM ready handler the only other issue may be dynamic form creation.

    In that case use a delegated event handler:

    e,.g.

    // Shorter DOM ready with local $ for shorter/standard jQuery code
jQuery(function($){
    // Clicking on submit button 
    $(document).on('submit', 'form:has(".booking-buttons")', function( evt ) {
        if ( validation() ) {
            console.log('yes');
            return true;
        } else {
            console.log('no');
            evt.preventDefault();
            return false;
        }
    });

    validation = function() {
        // if fields validate 
            // return true
        // else
            // return false
        // return false
    }

});

    This has the advantage that it will work on dynamically created forms. Basically it catches all submit events bubbling up to the document, then applies the jQuery filter, then applies the function to any matching elements that caused the event.

    If you allow for multiple forms on the page, then you need to pass the “current” form to the validation methods:

    // Shorter DOM ready with local $ for shorter/standard jQuery code
jQuery(function($){
    // Clicking on submit button 
    $(document).on('submit', 'form:has(".booking-buttons")', function( evt ) {
        if ( validation($(this)) ) {
            console.log('yes');
            return true;
        } else {
            console.log('no');
            evt.preventDefault();
            return false;
        }
    });

    validation = function($form) {
        // if fields within $form are validate 
            // return true
        // else
            // return false
        // return false
    }
});