Jquery Validate Within Chrome Extension Options Page

Completely new to this and JavaScript and coding in general so my apologies go out before I start. I've been trying to use jquery.validate.min.js to check text inputs for a chrome

Solution 1:

What you mean by "things go sideways" is likely the default behavior of <button> elements.

If such an element is inside a <form> element, the default is to behave like a submit button. That's not what you want: it reloads the page (which apparently has an added effect of not applying chrome_style as it's not explicitly loaded "as the options page").

Your problems can be fixed by specifying the button type:

<button type="button"id="save">Save</button>

Alternatively, you could call preventDefault() on the event object in save_options (if you added an event parameter). But specifying a button type is cleaner.