html5 - Validating form using javascript -
i trying validate form using external js file, wanting make "your name", "your email" , "is new page" mandatory field can not left blank, have been playing around different javascript functions cant seem work, feel simple mistake have made cant seem figure out. appreciate if take , see if can spot mistake. form:
<form method="post" action="#"> <h3 class="formheader">form header</h3> <div class="formpod"> <fieldset role="presentation"> <div class="formrow clearfix"> <span><label for="customername">your name</label></span> <input name="customername" id="customername" type="text" size="60" maxlength="200" /> </div> <div class="formrow clearfix"> <span><label for="customeremail">your email</label></span> <input name="customeremail" id="customeremail" type="text" size="60" maxlength="200" /> </div> <div class="formrow clearfix"> <fieldset> <legend>is new page</legend> <div> <input type="radio" name="radio" id="radioeasier" value="easier" /> <span><label for="radioeasier">easier use</label></span> </div> <div> <input type="radio" name="radio" id="radioharder" value="harder" /> <span><label for="radioharder">harder use</label></span> </div> <div> <input type="radio" name="radio" id="radiosame" value="same" /> <span><label for="radiosame">about same</label></span> </div> </fieldset> </div> <div class="formrow clearfix"> <span> <label for="comments">comments</label> <label for="comments" id="charsleft">(300)</label> </span> <textarea name="comments" id="comments" rows="4" cols="40"></textarea> </div> </fieldset> <div class="actionrow clearfix"> <div class="btn"> <input type="submit" value="submit" /> </div> </div> </div> </form> here external javascript file have been playing try validation work, starting customername.
<script type="text/javascript"> function checkforblank(){ if (document.getelementbyid('customername').value ==""){ alert('please enter name'); return false: } } </script> thanks.
you consider using html attributes? on input field can set required atribute , field form wont able sent untill filled. option use patter attribute on markup , use regex test validation
http://www.w3schools.com/tags/att_input_required.asp http://www.w3schools.com/tags/att_input_pattern.asp
looking @ code, on js, need take way ":" after "false" , replace ";"
also in markup, never called function on form submit thats why never got function running. try this:
html
<form method="post" action="#"> <h3 class="formheader">form header</h3> <div class="formpod"> <fieldset role="presentation"> <div class="formrow clearfix"> <span><label for="customername">your name</label></span> <input name="customername" id="customername" type="text" size="60" maxlength="200" /> </div> <div class="formrow clearfix"> <span><label for="customeremail">your email</label></span> <input name="customeremail" id="customeremail" type="text" size="60" maxlength="200" /> </div> <div class="formrow clearfix"> <fieldset> <legend>is new page</legend> <div> <input type="radio" name="radio" id="radioeasier" value="easier" /> <span><label for="radioeasier">easier use</label></span> </div> <div> <input type="radio" name="radio" id="radioharder" value="harder" /> <span><label for="radioharder">harder use</label></span> </div> <div> <input type="radio" name="radio" id="radiosame" value="same" /> <span><label for="radiosame">about same</label></span> </div> </fieldset> </div> <div class="formrow clearfix"> <span> <label for="comments">comments</label> <label for="comments" id="charsleft">(300)</label> </span> <textarea name="comments" id="comments" rows="4" cols="40"></textarea> </div> </fieldset> <div class="actionrow clearfix"> <div class="btn"> <input type="submit" value="submit" onclick="checkforblank();" /> </div> </div> </div> js
<script type="text/javascript"> function checkforblank(){ if (document.getelementbyid('customername').value === ""){ alert('please enter name'); return false; } } </script>
Comments
Post a Comment