I have the following JS code:

function checkFull(id) {
    var input = $('#' + id).val();  
    if (input == "") {
        return false;   
    }
    else {
        return true;
    }
}

function checkSame(id1,id2) {
    var input1 = $('#' + id1).val();    
    var input2 = $('#' + id2).val();
    if (input1 == input2) {
        return true;
    }
    else {
        return false;
    }
}
function showErrors() {
    if (!checkFull('username')) {
        $('#userfield').show(); 
    }
    else {
        $('#userfield').hide(); 
    }

    if (!checkFull('email')) {
        $('#notsame').show();   
    }
    else {
        $('#notsame').hide();   
    }

    if (!checkFull('confemail')) {
        $('#notsame2').show();  
    }
    else {
        $('#notsame2').hide();  
    }

    if (!checkFull('espncode')) {
        $('#nocode').show();    
    }
    else {
        $('#nocode').hide();    
    }

    if (notSame('email','confemail')) {
        $('#notsame2').show();
        $('#notsame').show();   
    }
    else {
        $('#notsame2').hide();  
        $('#notsame').hide();
    }
}
function valform() {
    showErrors();
    if (checkFull('username') && checkFull('email') && checkFull('confemail') && checkSame('email','confemail') && checkFull('espncode')) {
        form.submit();
        alert('success');
    }
    else {

        return false;
    }
}

And the following form:

<form method="post" action="forms/post.asp" onsubmit="valform();return false">
            <strong>Poker Username</strong> <span id="userfield" style="display:none;color:#F00">*</span><br />
            <input type="text" name="username" id="username" style="width:230px;" />
            <br /><br />
            <div class="vert">
                <strong>Email Address</strong> <span id="notsame" style="display:none;color:#F00">*</span><br />
                <input type="text" name="email" id="email" style="width:230px;" />
            </div>
            <div class="vert2">
                <strong>Confirm Email Address</strong> <span id="notsame2" style="display:none;color:#F00">*</span><br />
                <input type="text" name="confemail" id="confemail" style="width:230px;" />
            </div>
            <div style="clear:both;"></div>
            <div class="espn">
                <div class="txt"><strong>Enter the ESPN special code</strong></div>
                <input type="text" name="espncode" id="espncode" style="width:230px;" />
            </div>
            <div id="nocode" style="display:none">
                You need to enter the code above
            </div>
            <div class="tc">
                <input type="checkbox" id="agree" name="agree" /> <strong>You agree to the terms and conditions of this sweepstake. Only one entry per person per sweepstake period. Any additional entries will be disqualified.</strong>
            </div>
            <br />
            <div class="submit">
                <input type="image" src="submit_BTN.png" />
            </div>
        </form>

Even if I leave the form blank, when I press submit it will go through. Why is that?

I have the following JS code:

function checkFull(id) {
    var input = $('#' + id).val();  
    if (input == "") {
        return false;   
    }
    else {
        return true;
    }
}

function checkSame(id1,id2) {
    var input1 = $('#' + id1).val();    
    var input2 = $('#' + id2).val();
    if (input1 == input2) {
        return true;
    }
    else {
        return false;
    }
}
function showErrors() {
    if (!checkFull('username')) {
        $('#userfield').show(); 
    }
    else {
        $('#userfield').hide(); 
    }

    if (!checkFull('email')) {
        $('#notsame').show();   
    }
    else {
        $('#notsame').hide();   
    }

    if (!checkFull('confemail')) {
        $('#notsame2').show();  
    }
    else {
        $('#notsame2').hide();  
    }

    if (!checkFull('espncode')) {
        $('#nocode').show();    
    }
    else {
        $('#nocode').hide();    
    }

    if (notSame('email','confemail')) {
        $('#notsame2').show();
        $('#notsame').show();   
    }
    else {
        $('#notsame2').hide();  
        $('#notsame').hide();
    }
}
function valform() {
    showErrors();
    if (checkFull('username') && checkFull('email') && checkFull('confemail') && checkSame('email','confemail') && checkFull('espncode')) {
        form.submit();
        alert('success');
    }
    else {

        return false;
    }
}

And the following form:

<form method="post" action="forms/post.asp" onsubmit="valform();return false">
            <strong>Poker Username</strong> <span id="userfield" style="display:none;color:#F00">*</span><br />
            <input type="text" name="username" id="username" style="width:230px;" />
            <br /><br />
            <div class="vert">
                <strong>Email Address</strong> <span id="notsame" style="display:none;color:#F00">*</span><br />
                <input type="text" name="email" id="email" style="width:230px;" />
            </div>
            <div class="vert2">
                <strong>Confirm Email Address</strong> <span id="notsame2" style="display:none;color:#F00">*</span><br />
                <input type="text" name="confemail" id="confemail" style="width:230px;" />
            </div>
            <div style="clear:both;"></div>
            <div class="espn">
                <div class="txt"><strong>Enter the ESPN special code</strong></div>
                <input type="text" name="espncode" id="espncode" style="width:230px;" />
            </div>
            <div id="nocode" style="display:none">
                You need to enter the code above
            </div>
            <div class="tc">
                <input type="checkbox" id="agree" name="agree" /> <strong>You agree to the terms and conditions of this sweepstake. Only one entry per person per sweepstake period. Any additional entries will be disqualified.</strong>
            </div>
            <br />
            <div class="submit">
                <input type="image" src="submit_BTN.png" />
            </div>
        </form>

Even if I leave the form blank, when I press submit it will go through. Why is that?

• javascript
• jquery
• webforms
• validation

• is there any of your validation working? – Prateek Commented Aug 9, 2012 at 8:30
• @pKs - yes the 'errors' that i'm showing when running showErrors() are being displayed for a split second and then the form submits – user838437 Commented Aug 9, 2012 at 8:30
• Your first two functions could be greatly reduced to this – elclanrs Commented Aug 9, 2012 at 8:32

2 Answers 2

You need to return the value from your validate function inside the submit handler:

onsubmit="valform();return false"

should be:

onsubmit="return valform();"

Whenever valform returns false this will prevent the form from submitting.

By the way, the form.submit() call inside your valform function makes no sense. It will be submitted anyway if the function does not return false.

if (/*validity checks pass*/) {
    alert('success');
}
else {
    return false;
}

But, looking through your code with this fiddle I noticed there is an error:

ReferenceError: Can't find variable: notSame

If you fix the name of your function it will work. You should use the developer tools available to you to debug such minor bugs. There's Firebug for Firefox and Chrome/Safari e with a web inspector right built in. Opera has Dragonfly too.

Possible cause:

• onsubmit="valform();return false" change to onsubmit="valform();" in the form.

try if still not works then tell.