How do I add some javascript validation to the admin interface form's onsubmit?

Question

I have a plugin that adds meta boxes to the admin interface and I need to do some validation when the user presses the "update" button before the form is submitted.

Is there a WordPress action or hook to add my function to the form's onsubmit? Or do I need to simply do this:

Pseudo code

var myInput = document.getElementById( "myMetaBoxInput" );

//Get form from input
var form = myInput.form;

//They have something already set
if ( form.onsubmit )
{
    var previousSubmit = form.onsubmit;

    form.onsubmit = function() {
        //do my code....

        //Call their function
        previousSubmit();
    }
} else form.onsubmit = myfunction;

The problem with doing the above is that it's possible that wordpress could have some code that happens on the "update" button's "click" action which will set the form's onsubmit to another function and clear mine out.

Answer 1

Every post / page / post type is wrapped around a universal form with the ID of #post. So if you want to validate a page before submitting it you just need to say something like:

jQuery(document).ready(function($){
    $('#post').submit(function(){
        // Validate Stuff
        return false;
    });
});

Then you'll want to actually enqueue your javascript - View Codex

function my_enqueue($hook) {
    if ( 'edit.php' != $hook ) {
        return;
    }

    wp_enqueue_script( 'my_custom_script', plugin_dir_url( __FILE__ ) . 'myscript.js' );
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );

As far as your concern that another on submit handler will cancel out yours, from what I've tested it doesn't matter how many submit handlers return true, if 1 is false, the form will not submit.

Answer 2

This code might help you. I didn't try it in the dashboard but I use it in a page-template.

 // JavaScript Document
function valide()
    {
        var re_email =/^([_a-zA-Z0-9-]+)(\.[_a-zA-Z0-9-]+)*@([a-zA-Z0-9-]+\.)+([a-zA-Z]{2,3})$/;
        var mail = document.kontakt.mail.value;
        var name = document.kontakt.name.value;
        var checked = true;

        if (name=="")
        {
        alert ("Please enter a name.");
        checked = false;
        }
        if ((re_email.test(mail))==false || mail.length==0)
        {
        alert ("Please enter a correct e-mail address");
        checked = false;
        }
        if(checked)
        {
        document.kontakt.method = "post";
        document.kontakt.action = "http://xxx";
        document.kontakt.submit();
        }
        return checked;
    }
 //WP-template
 <form onSubmit="return valide()" method="post" name="kontakt">
        <table>
          <tr>
            <td>Name *</td>
            <td><input name="name" type="text" size="20"></td>
          </tr>
          <tr>
          <td>E-Mail</td>
            <td><input name="mail" type="text" size="20"></td>
          </tr>
          <tr>
           <td colspan="2"><br />
            <input name="Senden" type="submit" value="Send"></td>
          </tr>
        </table>
  </form>