SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Validating Password, Email, and CheckBox .

    Hey, am new to Java Script and been looking for some help with this script in other forums. Have come accross some help but still cant get it to work properly.
    The idea is that, once the required fields are field in, it will check so see if the password is correct and there are a fixed # of charachters. Looks and see that is a valid email address and checks the confirm field to see that they match. All sow it check to see if the user has read and agree to the terms and conditions by checking the check box. If any of this field or buttons are missing or incorrect, It would not let them proceed to the next page.
    Any help !

    function validatePwd() {
    var invalid = " "; // Invalid character is a space
    var minLength = 5; // Minimum length
    var empty;
    var pw1 = document.myForm.password;
    var pw2 = document.myForm.confirmpassword;
    // check for a value in both fields.
    if (!pw1.value) empty = pw1;
    else if (!pw2.value) empty = pw2;
    if (empty) {
    alert('Please enter both a Password and a Confirm Password.');
    empty.focus();
    return false;
    }
    // check for minimum length
    if (pw1.value.length < minLength) {
    alert('Your password must be at least ' + minLength + ' characters long. Please try again.');
    pw1.focus();
    return false;
    }
    // check for spaces
    if (pw1.value.indexOf(invalid) > -1) {
    alert("Sorry, spaces can not be used in Passwords. Please re-enter a Password.");
    pw1.focus();
    return false;
    }
    if (pw1.value != pw2.value) {
    alert ("\nThe Passwords you entered do not match. Please re-enter your passwords.");
    pw1.focus();
    return false;
    }
    return true;
    }

    function checkEmail(form) {
    var Email = form.Email;
    var ConfirmEmail = form.ConfirmEmail;
    if (!Email.value) {
    alert("\nPlease enter your E-mail address.");
    Email.focus();
    return false;
    }
    if (Email.value != ConfirmEmail.value) {
    alert ("\nThe E-mail addresses you entered do not match. Please correct.")
    Email.focus();
    return false;
    }
    return true;
    }

    function checkReqCBs(f) {
    if (!f.TermsAgreed.checked)
    {
    alert('You must agree to the Terms and Conditions to continue. Please select the "Yes" box.');
    f.TermsAgreed.focus();
    return false;
    }
    if (!f.MoneyBackAgreed.checked)
    {
    alert('You must agree to the Money Back Guaranty Policy to continue. Please select the "Yes" box.');
    f.MoneyBackAgreed.focus();
    return false;
    }
    return true;
    }


    <form onsubmit="return validatePwd()&&checkEmail(this)&&checkReqCBs(this)">

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not the best with JS, so I may be wrong, but...


    For one I don't believe you can have obSubmit in the form when you're trying to prevent them from going to the next page if it's not all accurate, else is just does all that, but still goes to the next page.

    The form stuff in the JS needs to be document.formName.fieldName as far as I believe.

    So you need to set a form name. Then on your submit button...I don't think there's a way to have a blank submit button that doesn't actually submit, but still in the <form></form>'s, so...take it out, and have a onClick to perform all of those actions.

    That's all I can really think of off the top of my head right now.
    -Mark

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually, magicsc, the name attribute for forms is deprecated in XHTML, and id should be used in it's place.

    KLean, you really should try to get the return values from all three function like that. Make a helper function, like....

    function validateForm(f) {
    return ( validatePwd() && checkEmail(f) && checkReqCBs(f) );
    }

    Now, without more details from you or seeing the form's HTML, I can't really say what else could be wrong.

    I'd like to note that I've got a pretty decent validator that I've written, fValidate
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Here would be the full code

    am working on the advices you guys recomended.

    <HEAD>

    <TITLE></TITLE>

    <SCRIPT LANGUAGE="JavaScript">
    function validatePwd() {
    var invalid = " "; // Invalid character is a space
    var minLength = 5; // Minimum length
    var empty;
    var pw1 = document.myForm.password;
    var pw2 = document.myForm.confirmpassword;
    // check for a value in both fields.
    if (!pw1.value) empty = pw1;
    else if (!pw2.value) empty = pw2;
    if (empty) {
    alert('Please enter both a Password and a Confirm Password.');
    empty.focus();
    return false;
    }
    // check for minimum length
    if (pw1.value.length < minLength) {
    alert('Your password must be at least ' + minLength + ' characters long. Please try again.')
    pw1.focus();
    return false;
    }
    // check for spaces
    if (pw1.value.indexOf(invalid) > -1) {
    alert("Sorry, spaces can not be used in Passwords. Please re-enter a Password.");
    pw1.focus();
    return false;
    }
    if (pw1.value != pw2.value) {
    alert ("\nThe Passwords you entered do not match. Please re-enter your passwords.");
    pw1.focus();
    return false;
    }
    return true;
    }

    function checkEmail(form) {
    var UserEmail = form.UserEmail;
    var UserConfirmEmail = form.UserConfirmEmail;
    if (!UserEmail.value) {
    alert("\nPlease enter your E-mail address.");
    Email.focus();
    return false;
    }
    if (UserEmail.value != UserConfirmEmail.value) {
    alert ("\nThe E-mail addresses you entered do not match. Please correct.")
    UserEmail.focus();
    return false;
    }
    return true;
    }

    function checkReqCBs(f) {
    if (!f.TermsAgreed.checked)
    {
    alert('You must agree to the Terms and Conditions to continue. Please select the "Yes" box.');
    f.TermsAgreed.focus();
    return false;
    }
    if (!f.MoneyBackAgreed.checked)
    {
    alert('You must agree to the Money Back Guaranty Policy to continue. Please select the "Yes" box.');
    f.MoneyBackAgreed.focus();
    return false;
    }
    return true;
    }
    </script>
    <SCRIPT LANGUAGE="JavaScript">
    <!-- auto Tab -->

    var isNN = (navigator.appName.indexOf("Netscape")!=-1);
    function autoTab(input,len, e) {
    var keyCode = (isNN) ? e.which : e.keyCode;
    var filter = (isNN) ? [0,8,9] : [0,8,9,16,17,18,37,38,39,40,46];
    if(input.value.length >= len && !containsElement(filter,keyCode)) {
    input.value = input.value.slice(0, len);
    input.form[(getIndex(input)+1) % input.form.length].focus();
    }
    function containsElement(arr, ele) {
    var found = false, index = 0;
    while(!found && index < arr.length)
    if(arr[index] == ele)
    found = true;
    else
    index++;
    return found;
    }
    function getIndex(input) {
    var index = -1, i = 0, found = false;
    while (i < input.form.length && index == -1)
    if (input.form[i] == input)index = i;
    else i++;
    return index;
    }
    return true;
    }
    // End -->


    </script>


    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <script language="JavaScript" type="text/JavaScript">
    <!--
    function MM_displayStatusMsg(msgStr) { //v1.0
    status=msgStr;
    document.MM_returnValue = true;
    }
    //-->
    </script>

    </HEAD>

    <BODY BGCOLOR=#FFFFFF text="#FFFFFF" link="#990000" vlink="#999999" alink="#FFFFFF" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

    <tr>
    <td height="796"> <div align="center">
    <p><font color="#333333"><font color="#CC0000" size="2" face="Verdana, Arial, Helvetica, sans-serif">
    </font> <br>
    <font color="#990000" size="4"><strong> <u>New User Registration
    Form</u></strong></font></font><br>
    <font color="#990000" size="1"><br>
    (* Denotes required Fields)</font> </p>
    <form action="" method="get" name="myForm" id="myForm" onClick="return validatePwd()&&checkEmail(this)&&checkReqCBs(this)">
    <table width="515" border="0" align="center" cellpadding="1" cellspacing="1">
    <tr>
    <td width="256"> <div align="left"><font color="#990000" size="-1"><strong>First
    Name/strong></font> </div></td>
    <td width="252"> <div align="left"><font color="#990000" size="-1"><strong>Last
    Name/strong></font></div></td>
    </tr>
    <tr>
    <td><font color="#990000" size="-1">
    <input name=UserFirstName type=text id="UserFirstName" onBlur="MM_displayStatusMsg('\"Please enter your Full Name\"');return document.MM_returnValue" size=25 maxlength=30>
    * </font></td>
    <td><div align="left"><font color="#990000" size="-1">
    <input name=UserLastName type=text id="UserLastName" onBlur="MM_displayStatusMsg('\"Please enter your Address\"');return document.MM_returnValue" size=25 maxlength=30>
    * </font></div></td>
    </tr>
    <tr>
    <td><font color="#990000" size="-1"><strong>Address
    1: </strong></font></td>
    <td><div align="left"><font color="#990000" size="-1"><strong>Address
    2/strong></font></div></td>
    </tr>
    <tr>
    <td> <div align="left"><font color="#990000" size="-1">
    <input name=UserAddress1 type=text id="UserAddress1" onBlur="MM_displayStatusMsg('\"Please enter your Address\"');return document.MM_returnValue" size=25 maxlength=100>
    *</font></div></td>
    <td><div align="left"><font color="#990000" size="-1">
    <input name="UserAddress2" type="text" id="UserAddress2" size="25" maxlength="100">
    </font></div></td>
    </tr>
    <tr>
    <td height="19" align=right class=text> <div align="left"><font color="#990000" size="-1"><strong>City:
    </strong> </font></div></td>
    <td><div align="left"><font color="#990000" size="-1"><strong>State/strong></font></div></td>
    </tr>
    <tr>
    <td><div align="left"><font color="#990000" size="-1" face="Arial, Helvetica, sans-serif">
    <input name="UserCity" type="text" id="UserCity" size="25" maxlength="50">
    * </font></div></td>
    <td><div align="left"><font size="-1">
    <select name="UserState" size="1" id="select">
    <option value="0" selected>Select State</option>
    <option value="AL">Alabama</option>

    </select>
    * </font><font color="#990000" size="-1">*</font></div></td>
    </tr>
    <tr>
    <td><div align="left"><font color="#990000" size="-1"><strong>Zip
    Code: </strong></font></div></td>
    <td> <div align="left"><font color="#990000" size="-1"></font></div></td>
    </tr>
    <tr>
    <td> <div align="left"><font color="#990000" size="-1">
    <input name="UserZipCode" type="text" id="UserZipCode" size="15" maxlength="10">
    * </font></div></td>
    <td><div align="left"><font color="#990000" size="-1">
    </font></div></td>
    </tr>
    <tr>
    <td><div align="left"><font color="#990000" size="-1"><strong>Daytime
    Phone: </strong></font></div></td>
    <td><div align="left"><font color="#990000" size="-1"><strong>Evening
    Phone/strong></font></div></td>
    </tr>
    <tr>
    <td><div align="left"><font size="-1">
    <input name="UserDayTimeAreaCode1" id="UserDayTimeAreaCode1" onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3">
    <font color="#990000"> -</font><small>
    <input name="UserDayTimeExch1" id="UserDayTimeExch1" onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3">
    </small> -<font color="#990000"><small>- </small></font>
    <small>
    <input name="UserDayTimeExt1" id="UserDayTimeExt1" onKeyUp="return autoTab(this, 4, event);" size="5" maxlength="4">
    </small></font><font color="#990000" size="-1">*<br>
    </font></div></td>
    <td><div align="left"><font size="-1">
    <input name="UserEveningAreaCode" id="UserEveningAreaCode" onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3">
    <font color="#990000"> - </font><small>
    <input name="UserEveningTimeExch1" id="UserEveningTimeExch1" onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3">
    </small><font color="#990000"> - </font><small>
    <input name="UserEveningExt1" id="UserEveningExt1" onKeyUp="return autoTab(this, 4, event);" size="5" maxlength="4">
    </small></font><font color="#990000" size="-1">
    *</font></div></td>
    </tr>
    <tr>
    <td> <div align="left"><font color="#990000" size="-1" face="Arial, Helvetica, sans-serif">
    </font></div></td>
    <td> </td>
    </tr>
    <tr>
    <td><font color="#990000" size="-1"><strong>E-mail Address:
    </strong></font><strong><font color="#990000" size="-1" face="Arial, Helvetica, sans-serif">
    </font></strong></td>
    <td><font color="#990000" size="-1"><strong>Confirm
    E-mail Address: </strong></font><strong><font color="#990000" size="-1" face="Arial, Helvetica, sans-serif">
    </font></strong></td>
    </tr>
    <tr>
    <td> <div align="left"> <font color="#990000" size="-1">
    <input name="UserEmail" type="text" id="UserEmail" size="25" maxlength="50">
    * </font></div></td>
    <td><font color="#990000" size="-1" face="Arial, Helvetica, sans-serif">
    <input name="UserConfirmEmail" type="text" id="UserConfirmEmail" size="25" maxlength="50">
    * </font></td>
    </tr>
    <tr>
    <td> <div align="left"><font color="#990000" size="-1"><strong>Choose
    a Password (5-12 Characters)</strong></font><strong><font color="#990000" size="-1" face="Arial, Helvetica, sans-serif">:
    </font></strong> </div></td>
    <td><font color="#990000" size="-1"><strong>Confirm
    Password: </strong></font></td>
    </tr>
    <tr>
    <td> <div align="left"><font color="#990000" size="-1" face="Arial, Helvetica, sans-serif">
    </font><font size="-1" face="Arial, Helvetica, sans-serif">
    <input name="Userpassword" type="password" id="Userpassword" size="25" maxlength="20">
    </font><font color="#990000" size="-1" face="Arial, Helvetica, sans-serif">
    * </font></div></td>
    <td><div align="left"><font color="#990000" size="-1" face="Arial, Helvetica, sans-serif">
    <input name="Userconfirmpassword" type="password" id="Userconfirmpassword" size="25" maxlength="12">
    * </font></div></td>
    </tr>
    </table>
    <tr>
    <td width="404" height="36"><p>&nbsp;</p><div align="center">
    <table width="520" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td width="143"><label></label></td>
    <td width="107"><font color="#990000" size="-1"><strong>
    <label><font size="-1"><font color="#990000" size="-1"><strong>
    <input name="TermsAgreed" type="checkbox" id="TermsAgreed6" value="Yes">
    </strong></font><font color="#990000"><strong>Yes</strong></font></font></label>
    <font color="#990000"> , <font size="-1"><strong>I
    Accept </strong></font></font> </strong></font></td>
    <td width="19"> </td>
    <td width="251"><font color="#990000" size="-1"><strong>
    <input name="MoneyBackAgreed" type="checkbox" id="MoneyBackAgreed3" value="No">
    No. I do not accept</strong></font> </td>
    </tr>
    </table>
    <p><font color="#666666" size="-1">
    <input name="Reset Button" type="reset" class="FromButton" id="Reset Button7" value="Reset Form">
    <input name="Submit" type="submit" class="FromButton" value="Continue">
    </font><font color="#990000"><strong> </strong></font></p>
    </div></td>
    </tr>
    <tr>
    <td height="18"> <div align="center">
    <label></label>
    <font size="-1">&nbsp; </font>
    <table width="563" height="26" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="175" height="26"> </td>
    <td width="86">
    <div align="right">
    <p><font color="#666666" size="-1"> </font></p>
    </div></td>
    <td width="10"> </td>
    <td width="269"><font color="#666666" size="-1"> </BODY>
    </HTML>

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah. I've always used the name attribute, it's worked fine for me. Oh well, good to know.


    and Klean, you should have just posted the forum, not all the HTML of your entire page.
    -Mark

  6. #6
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Kind of messy right

  7. #7
    SitePoint Member
    Join Date
    Dec 2002
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Working

    Here is the working version.

    <script type="text/javascript">
    <!--
    function checkEntries(frm)
    {
    var filledIn = false;

    // Use the length property to iterate through each Checkbox
    // to determine if a selection has been made
    for (var counter=0; counter<frm.CheckBox.length; counter++)
    if (frm.CheckBox[counter].checked == true)
    filledIn = true;

    if (filledIn == false)
    {
    alert('You must agree to the Terms & Conditions to continue. Please select the "Yes" Box.');
    return false;
    }

    else if (frm.password.value == "")
    {
    alert('You must provide a password to login');
    frm.password.focus();
    return false;
    }
    // Ensure the password is at least six characters
    else if (frm.password.value.length < 5)
    {
    alert('The password must be at least 5 characters.');
    frm.password.focus();
    frm.password.select();
    return false;
    }
    // If the confirmation passowrd doesn't match the original password,
    // show an error message, set focus back to the field, and highlight the entry.
    else if (frm.confirmpassword.value != frm.password.value)
    {
    alert('The Passwords you entered do not match. Please re-enter your passwords.');
    frm.confirmpassword.focus();
    frm.confirmpassword.select();
    return false;
    }
    return true;
    }

    //-->

    </script>

    <form id="loginDetails" name="loginDetails" method="POST" action="<?php echo $editFormAction; ?>" onsubmit="return checkEntries(this)">



    Dont pay to much attention to <?php echo $editFormAction; ?> that is for the php redirection.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •