How can I stop a form submit and validate with javascript?

Question

I've come across a form that, on the rendered page, looks like this:

<form id="mx_locator" name="mx_locator" method="post" action="search-results">

  <!-- form elements -->
  <span><input type="image" src="/images/search.png" onclick="loader()"></span>

</form>

The form itself, in the template code, looks like this:

{exp:mx_google_map:form result_page = "search-results" log="" lat="" unit = "" backspace="1"}
  {embed="site/sidebar_search"}
{/exp:mx_google_map:form} 

Question 1) Where can I edit the form html? And/or how can I add an onsubmit attribute to the form's opening tag? Does that EE code build a form tag? Or can I edit the static html elsewhere? In addition to other methods, I want to try to add an onsubmit attribute to the form tag. Not saying it's the best way, or that it'll work, but I want to try.

Question 2) How can I stop the form submission to check two text input fields before proceeding? I need to make it so one of two fields, in this case zip or city, are not blank. At least one must be filled.

I thought the loader() bit took care of everything, meaning I could call a diff function and then have loader() called when the validator checks out ok, but loader() just handles some css changes. I have no idea how the form is calling the MXgm script or sending it data, so I don't know how to stop it or call it manually myself.

Thanks for any tips.

Answer 1

You can use the Forms JS Validation plugin http://devot-ee.com/add-ons/forms-js-validation

You can add basic and complex validation to your forms without modify the form tag itself.

Answer 2

To stop the posting of the forum, you can use jQuery submit: http://api.jquery.com/submit/

The code would look something like this:

$(window).ready(function() {
    $('#mx_locator').submit(function() {
        if ($('#mx_zip').val() == '' && $('#mx_city').val() == '') {
            // Additional code here to light up the input or display error message
            return false;
        }
        return true;
    });
});

return false will stop the form from submitting.