Question

I have a form and I do JavaScript validation function onsubmit:

<form method="post" onsubmit="return validateForm(this.id)" action="<?php echo $PHP_SELF; ?>" enctype="multipart/form-data" id='addjournalinfoform' style='border:0px;width:90%' class="formular" >
 
    <fieldset>
        <legend>
        Journal
        </legend>
        <label>
            <span>* ISSN:</span><br />
            <input type='text' onfocusout="validateField('issn')" class='text-input' value="" name="issn" id="issn" style='width:30%'>
        </label>
   </fieldset>

</form>

and this is the function:

function validateForm(form)
{
    if(form=="addjournalinfoform")
    {
        alert('onSubmit');
        if($('#issn').val()=="")
        {
            $('#issnMsg').hide(500);
            $('#issnMsg .formErrorContent').html("* This field is required!<br />");
            $('#issnMsg').css('margin-left', $('#'+field).width()-20);
            $('#issnMsg').show(500);
            $('#issn').focus();
            $('html:not(:animated),body:not(:animated)').animate({scrollTop: $('#issn').offset().top-50}, 0);
            return false;
        }
        else
        {
            return true;
        }
        
    }
    return false;
}

The problem is even when the function returns false, the form is still submitted. What am doing wrong, and how to prevent the submit?

Answer 1

In this line:

$('#issnMsg').css('margin-left', $('#'+field).width()-20);

The variable field is not defined.

Uncaught ReferenceError: field is not defined

You must learn how to debug your own applications, because you won’t get far without it. Read about using the Console in whatever browser you are using.

You can find information about opening the console in your browser in this Webmasters.SE question.