Get proper error messages for java popup, how?

Discussion in 'JavaScript' started by redrum, Mar 23, 2007.

  1. #1
    I have a java script that checks so all forms are proper field in by the visitor.

    One of these fields is a password field, that is optional.
    So if you don't want to create an account you choose "No, I don’t want to crate an account". If you want to create an account you choose "Yes, I want to create an account" and then you fill in the password.
    These two choices are controlled by two radio boxes.

    Here's the problems;
    If I leave some required fields out (like name, address etc.) I get a popup saying that I need to fill in all the required fields, including the password fields no matter if I choose to create an account or not by selecting between the radio boxes.
    If I select to not open an account, the popup message that I have to fill in the password should be left out, but its not.

    And then if I fill in all fields properly, except the password filled, select to create an account and the hit submit I don’t get a java popup at all. Then the form is submitted



    This is the java code for the password checking:
    //fast easy checkout start
    function check_password(field_name_1, field_name_2, field_size, message_1, message_2, $createaccount) {
      if (form.elements[field_name_1] && (form.elements[field_name_1].type != "hidden")) {
        var password = form.elements[field_name_1].value;
        var confirmation = form.elements[field_name_2].value;
    
        if (password == '' || password.length < field_size) {
          error_message = error_message + "* " + message_1 + "\n";
         if  ($createaccount == 'Y')    error = true;
        } else if (password != confirmation) {
          error_message = error_message + "* " + message_2 + "\n";
           if  ($createaccount == 'Y')  error = true;
        }
      }
    }
    //fast easy checkout end
    Code (markup):


    This is the code from the html source for the fields with the password:
             <table border="0" cellspacing="2" cellpadding="2">
                 <tr>
    		<td class="main">By open an account everything will be much easer...</td>
    	     </tr>
    	     <tr>
                    <td class="main"><input type="radio" name="createaccount" value="Y" CHECKED>&nbsp;&nbsp;Yes, I want to create an account.&nbsp;&nbsp;</td></tr>
                    <tr>
                    <td class="main"><input type="radio" name="createaccount" value="N">&nbsp;&nbsp;No, I don’t want to crate an account.&nbsp;<span class="inputRequirement">*</span></td>
                 </tr>
    	     <tr>
    		<td class="main">Choose a password</td>
                 </tr>
                </table>
                <table>
    	       <tr>
    		<td class="main">Password:</td>
                    <td class="main"><input type="password" name="password" maxlength="40">&nbsp;<span class="inputRequirement">*</span></td>
                  </tr>
                  <tr>
                    <td class="main">Confirm password:</td>
                    <td class="main"><input type="password" name="confirmation" maxlength="40">&nbsp;<span class="inputRequirement">*</span></td>
                  </tr>
                </table>
    Code (markup):



    This is the complete java script:
    <script language="javascript"><!--
    var form = "";
    var submitted = false;
    var error = false;
    var error_message = "";
    
    function check_input(field_name, field_size, message) {
      if (form.elements[field_name] && (form.elements[field_name].type != "hidden")) {
        var field_value = form.elements[field_name].value;
    
        if (field_value == '' || field_value.length < field_size) {
          error_message = error_message + "* " + message + "\n";
          error = true;
        }
      }
    }
    
    function check_radio(field_name, message) {
      var isChecked = false;
    
      if (form.elements[field_name] && (form.elements[field_name].type != "hidden")) {
        var radio = form.elements[field_name];
    
        for (var i=0; i<radio.length; i++) {
          if (radio[i].checked == true) {
            isChecked = true;
            break;
          }
        }
    
        if (isChecked == false) {
          error_message = error_message + "* " + message + "\n";
          error = true;
        }
      }
    }
    
    function check_select(field_name, field_default, message) {
      if (form.elements[field_name] && (form.elements[field_name].type != "hidden")) {
        var field_value = form.elements[field_name].value;
    
        if (field_value == field_default) {
          error_message = error_message + "* " + message + "\n";
          error = true;
        }
      }
    }
    
    //fast easy checkout start
    function check_password(field_name_1, field_name_2, field_size, message_1, message_2, $createaccount) {
      if (form.elements[field_name_1] && (form.elements[field_name_1].type != "hidden")) {
        var password = form.elements[field_name_1].value;
        var confirmation = form.elements[field_name_2].value;
    
        if (password == '' || password.length < field_size) {
          error_message = error_message + "* " + message_1 + "\n";
         if  ($createaccount == 'Y')    error = true;
        } else if (password != confirmation) {
          error_message = error_message + "* " + message_2 + "\n";
           if  ($createaccount == 'Y')  error = true;
        }
      }
    }
    //fast easy checkout end
    
    function check_password_new(field_name_1, field_name_2, field_name_3, field_size, message_1, message_2, message_3) {
      if (form.elements[field_name_1] && (form.elements[field_name_1].type != "hidden")) {
        var password_current = form.elements[field_name_1].value;
        var password_new = form.elements[field_name_2].value;
        var password_confirmation = form.elements[field_name_3].value;
    
        if (password_current == '' || password_current.length < field_size) {
          error_message = error_message + "* " + message_1 + "\n";
          error = true;
        } else if (password_new == '' || password_new.length < field_size) {
          error_message = error_message + "* " + message_2 + "\n";
          error = true;
        } else if (password_new != password_confirmation) {
          error_message = error_message + "* " + message_3 + "\n";
          error = true;
        }
      }
    }
    
    function check_form(form_name) {
      if (submitted == true) {
        alert("This form has already been submitted. Please press Ok and wait for this process to be completed.");
        return false;
      }
    
      error = false;
      form = form_name;
      error_message = "Errors have occured during the process of your form.\n\nPlease make the following corrections:\n\n";
    
      check_input("firstname", 2, "Your First Name must contain a minimum of 2 characters.");
      check_input("lastname", 2, "Your Last Name must contain a minimum of 2 characters.");
    
      check_input("email_address", 6, "Your E-Mail Address must contain a minimum of 6 characters.");
      check_input("street_address", 5, "Your Street Address must contain a minimum of 5 characters.");
      check_input("postcode", 4, "Your Zip Code must contain a minimum of 4 characters.");
      check_input("city", 3, "Your City must contain a minimum of 3 characters.");
    
      check_select("country", "", "You must select a country from the Countries pull down menu.");
    
      check_input("telephone", 3, "Your Telephone Number must contain a minimum of 7 characters.");
    
      check_password("password", "confirmation", 5, "Your Password must contain a minimum of 5 characters.", "The Password Confirmation must match your Password.");
      check_password_new("password_current", "password_new", "password_confirmation", 5, "Your Password must contain a minimum of 5 characters.", "Your new Password must contain a minimum of 5 characters.", "The Password Confirmation must match your new Password.");
    
    
      if (error == true) {
        alert(error_message);
        return false;
      } else {
        submitted = true;
        return true;
      }
    }
    //--></script>
    Code (markup):
    Is there someone out there that have an idea of how to solve this, I have tried a lot of things but I just cant get it to work.

    Thanks,
    Fredrik
     
    redrum, Mar 23, 2007 IP
  2. krakjoe

    krakjoe Well-Known Member

    Messages:
    1,795
    Likes Received:
    141
    Best Answers:
    0
    Trophy Points:
    135
    #2
    can we get a link to the code or the actual code as it is in your document
     
    krakjoe, Mar 24, 2007 IP
  3. Adi

    Adi Peon

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    1. While checking the missing required fields your set the error variable to be true
    2. In the check password function you always add the error message without checking which radio did the
    user selected
    ==> The missing password error will be displayed

    Please have a closer look at the return value of $createaccount , maybe it returns other value from what you expect.

    General notes
    1. Using global variables is a bad idea - this is true to all programing languages

    2. Today it is conman to add a red * to the missing required field (with a short message) - this is better then displaying a scary alert.

    3. In order to solve those kind of problems I recommended to comment out code until the problem disappears and then gradually add back the code until you find where the problem is.

    Good luck :)
     
    Adi, Mar 24, 2007 IP
  4. redrum

    redrum Peon

    Messages:
    18
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Sure, you can find it at http://www.bulletproofmedia.biz/osc_testbutik/catalog/create_account.php
    Feel free to test it out as mucj as you want, its just a test shop.

    Fredrik
     
    redrum, Mar 25, 2007 IP