Jquery .valid() method causes form to display highlighted fields on load

I wrote a script that should only run on submit if the form is valid. Basically the user fills out a form fr开发者_如何学Goom 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.

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 
   }
});

You want validate field only submit page? If yes, I think you need change your script:

var $tabs = $('#tabs').tabs();

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

// Sorry for my english, I'm brazilian.

1. remove your function from jQuery onLoad event: $(document).ready(function() { ...
2. move it new one function validateMyForm() { ...
3. activate that function when a user changes form fields:

<input type="text" onkeyup="validateMyForm()" onblur"validateMyForm()">

Update: There was an issue with the jquery script we were referencing.