forms - debugging issue in javascript with submit button function -
this code seems doing want to, until part user clicks submit , validateinput() function supposed either submit form or send error alert message. can't figure out wrong code.
can help?
this link actual code -- http://ciswebs.smc.edu/cis55/naruse_kevin_k/week2/default.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>week 2 cis 55</title> <script type="text/javascript"> function validatetext(inputfield, helptext) { if (inputfield.value.length == 0) { if (helptext != null) { helptext.innerhtml = "please come in value"; } homecoming false; } else { if (helptext != null) { helptext.innerhtml = /*inputfield.value.length + */""; } homecoming true; } } function validate_zip_code(inputfield, helptext) { var isnumber = true; var is5chars = true; if (isnan(inputfield.value)) { //alert("not number"); if (helptext != null) { helptext.innerhtml = /*inputfield.value.length +*/ "please come in numeric value"; } homecoming false; } else if (inputfield.value.length != 5) { //alert("not 5 digits") if (helptext != null) { helptext.innerhtml = /*inputfield.value.length +*/ "please come in valid zip code 5 digits"; } homecoming false; } else { if (helptext != null) { helptext.innerhtml = ""; } //alert("passed test"); homecoming true; } } function submit_validate(form) { //alert("check except zip"); if ( validatetext( form["first_name"], form["first_name_help"] ) && validatetext( form["last_name"], form["last_name_help"] ) && validatetext( form["street"], form["street_help"] ) && validatetext( form["city"], form["city_help"] ) && validatetext( form["state"], form["state_help"] ) && validate_zip_code( form["zip"], form["zip_help"] ) ) { alert( "so far - validated everyting else next check zip code"); // on next if/then alert("yay - ready submit now"); form.submit(); } else { alert("we didn't zip, smething else wrong"); alert("one or more fields incorect. please right before submitting"); homecoming false; } } function submit_validate1(form) { //alert("check except zip"); if ( validatetext( form["first_name"], form["first_name_help"] ) && validatetext( form["last_name"], form["last_name_help"] ) && validatetext( form["street"], form["street_help"] ) && validatetext( form["city"], form["city_help"] ) && validatetext( form["state"], form["state_help"] ) ) { //alert( "so far - validated everyting else next check zip code"); // on next if/then if ( validate_zip_code( form["zip"], form["zip_help"] ) ) { form.submit(); alert("yay - ready submit now"); } else { alert("your zip isn't valid - please right info , resubmit"); } } else { alert("we didn't zip, smething else wrong"); alert("one or more fields incorect. please right before submitting"); } } </script> </head> <body <form action="" method="post" name="address_form"> <fieldset> <p> <label>first name:</label> <input name="first_name" id="first_name" type="text" onblur="validatetext( this, document.getelementbyid('first_name_help') );" /> <span id="first_name_help" class="help"></span> </p> <p> <label>last name:</label> <input name="last_name" id="last_name" type="text" onblur="validatetext( this, document.getelementbyid( 'last_name_help' ) );"> <span id="last_name_help" class="help"></span> </p> <p> <label>street</label> <input name="street" id="street" type="text" onblur="validatetext( this, document.getelementbyid( 'street_help' ) );"> <span id="street_help" class="help"></span> </p> <p> <label>city</label> <input name="city" id="city" type="text" onblur="validatetext(this, document.getelementbyid( 'city_help' ));"> <span id="city_help" class="help"></span> </p> <p> <label>state</label> <input name="state" id="state" type="text" onblur="validatetext(this, document.getelementbyid( 'state_help' ) );"> <span id="state_help" class="help"></span> </p> <p> <label>zip</label> <input name="zip" type="text" onblur="validate_zip_code( this, document.getelementbyid( 'zip_help' ) );"> <span id="zip_help" class="help"></span> </p> <p> <input name="submit" type="submit" id="submit" value="submit" onclick="return submit_validate( this.form );"> </p> </fieldset> </form> </body> </html>
here's how write validation functions. have neatly linked error message elements related form command name, utilize advantage:
function validatetext(node) { var msgel = document.getelementbyid(node.name + '_help'); if (node.value.length == 0) { msgel.innerhtml = "please come in value"; homecoming false; } msgel.innerhtml = ''; homecoming true; } function validate_zip_code(node) { var msgel = document.getelementbyid(node.name + '_help'); var value = node.value; if (!/^\d{5}$/.test(node.value)) { msgel.innerhtml = 'zip code must 5 digits'; homecoming false } msgel.innerhtml = ''; homecoming true; } these functions can called list of command names don't have phone call them individually each control, e.g.
validatetext('first-name', 'last_name', 'street',...) i'll leave alter you. :-)
the next has minimal re-writing of submit_validate function, still needs tidied up:
function submit_validate(form) { if (validatetext(form["first_name"]) && validatetext(form["last_name"]) && validatetext(form["street"]) && validatetext(form["city"]) && validatetext(form["state"]) && validate_zip_code(form["zip"]) ) { alert( "so far - validated everyting else next check zip code"); // on next if/then alert("yay - ready submit now"); homecoming true; } else { alert("one or more fields incorect. please right before submitting"); homecoming false; } } the submit listener should on form gets called whenever form submitted, since forms can submitted without clicking submit button.
also, having form command name or id of "submit" masks form's submit method can't phone call it. submit button doesn't need either name or id (or value, though might give one), remove them:
<form ... onsubmit="return submit_validate(this);"> ... <p> <input type="submit"> </p> </form> javascript forms validation button submit
No comments:
Post a Comment