Can anyone tell me why my script below is showing my error message on page load? You have to click into the field to hide it. What it is supposed to do is throw the error message (on page like a required message) if field is left blank or if it is an invalid mobile number and the user clicks submit.

function customAlert(msg){
var div = $("#mobile_number");
if (div.length == 0) {
div = $("<div id='mobile_number' onclick='$(this).hide();'></div>");
$("input#mobile_number").live("focus", function(){

$('#register_form').submit(function() {
$('#mobile_number').append('Handler for .submit() called');
return false;

<form method="post" action="#" id="register_form" class="validate">
<input type="hidden" name="page" value="" />
<input type="hidden" name="unregistered" value="false" />
<legend>I am a new online customer</legend>

<div class="element">
<div id="mobile_number">
<span>Please enter a valid UK mobile number.</span>
<label for="mobile_number">Mobile:**</label>
<input name="mobileNumber" type="text" id="mobile_number" title="Please enter at least one number" class="text validate {validate:{minLength:10, eitherOr:'#telephone_number', messages:{minLength:'Please enter a valid phone number (at least @NUM digits long)', eitherOr:'Please enter either your Telephone or Mobile number'}}}" />

<div class="element continue_shopping_cont submit">
<button type="submit" class="submit button small_button"><span>Register</span></button>

<input type="hidden" name="secure_from" value="" />
Please note that I am not able to amend the HTML.