Question

I wrote a script that should only run on submit if the form is valid. Basically the user fills out a form from a tab and then if the form is valid, the script runs and unhides the next tab and automatically navigates the user to it. Here is the script:

var $tabs = $('#tabs').tabs();
    if ($('#quoteform').valid() == true) {
                    $('#submitbutton').click(function () {                
                        unhidetab();
                        $tabs.tabs('select', 2);
                        return false;               
                    });
                }

The script functions as needed, but there’s a problem. On page load, it automatically highlights the fields as invalid. Is there a way to write this so that it still functions but doesn’t automatically highlight required fields as invalid on page load? Thanks.

Answer 1

I think you sholud bind the script to the submit button, otherwise it’s executed when it’s launched (on document.ready() i suppose)

$('#submitbutton').click(function (event) {                
   if ($('#quoteform').valid() === true) {
      //submit the form or do what you want
   }else{
      event.preventDefault();//avoid submitting the form 
   }
});