/    Sign up×
Community /Pin to ProfileBookmark

Basic Form Validation

Having a bit of trouble with some basic form validation, basically what is meant to happen is if any of the fields are empty when the user clicks submit, a message comes up in the span ‘eFld1’. At first i thought it was because document.write() had already been run but after adding an alert() to the script that didnt work either so im quite stumped as to whats going on

What am i doing wrong and what should i be doing?

Script in Header

[CODE]
<script type=”text/javascript”>
var errorList1 = “”
var errorList2 = “”
var regForm = document.register

function validateForm() {

if (regForm.uName.value == null) {
alert(‘somethings wrong’)
return false;
}

else {
return true;
}
}
</script>
[/CODE]

Form

[CODE]
<form name=”register” method=”post”>
<span id=”eFld1″>
</span>
Name: <br />
<input type=”text” name=”bName” /><br />
Phone: <br />
<input type=”text” name=”bPhone” /><br /><br />
<span id=”eFld2″>
</span>
Name: <br />
<input type=”text” name=”uName” /><br />
Phone: <br />
<input type=”text” name=”uPhone” />
<input type=”submit” onSubmit=”validateForm”/>
</form>
[/CODE]

Any help would be appreciated.

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@KorFeb 22.2011 — The submit action belongs to the FORM element, not to the button. Anyway, to prevent an action you should "ask" for a certain return from the function. And when you call a function, call a function, () included.
<i>
</i>&lt;form name="register" method="post"[COLOR="Blue"] onsubmit="[B]return[/B] validateForm()"[/COLOR]&gt;
...
&lt;input type="submit" value="Submit" /&gt;

Now the JavaScript code has also some mistakes
<i>
</i>[COLOR="Red"]var regForm = document.register[/COLOR]

function validateForm() {

<i> </i>if (regForm.uName.value == [COLOR="Red"]null[/COLOR]) {


1. You try to refer an element (the form) before he was actually loaded. You should use the reference inside the function, as a local variable, not as global. In fact you don't need that: You may pass the form itself to the function, on using the self reference: [B]this[/B]

  • 2. A [I]value[/I] of an element is never [B]null[/B] (by the way, in JavaScript [B]null[/B] is an [I]object[/I], not a value. So that only the objects defined, but without any clear reference can be [B]null[/B]). It is an empty string


  • So:
    <i>
    </i>&lt;script type="text/javascript"&gt;
    var errorList1 = ""
    var errorList2 = ""
    function validateForm(regForm) {

    <i> </i>if (regForm['uName'].value == '') {
    <i> </i> alert('somethings wrong')
    <i> </i> return false;
    <i> </i>}
    }
    &lt;/script&gt;
    ...
    ...
    &lt;form name="register" method="post"[COLOR="Blue"] onsubmit="[B]return[/B] validateForm([B]this[/B])"[/COLOR]&gt;
    ...
    &lt;input type="submit" value="Submit" /&gt;

    You don't need to[B] return true[/B]. If the validation is passed, the function returns itself, which is equivalent with a Boolean [B]true[/B] anyway.
    ×

    Success!

    Help @_Panties spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...