dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Need Some Help With Password Validation

  1. #1
    Join Date
    Oct 2013
    Posts
    11

    Need Some Help With Password Validation

    Hey,
    I am looking to have my passwords match when a user fills out this form I have created. However I do not know how to do this.

    Enter the first password and then the second with something completely different, and yet it still accepts it. I don't want that, I want it to reject it if they don't match. Help!

    Here is my code so far:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Form Sample</title>
    <link rel="stylesheet" href="normalize.css" />
    <link rel="stylesheet" href="mystyle.css" />

    <!--[if lt IE 8]>
    <style>
    legend {
    display: block;
    padding: 0;
    padding-top: 30px;
    font-weight: bold;
    font-size: 1.25em;
    color: #FFD98D;
    margin: 0 auto;
    }
    </style>
    <![endif]-->

    </head>
    <body>
    <form id="myform" name="theform" class="group" action="sent.html" method="POST">
    <fieldset id="login" title="Login Info">
    <legend>Log In Info</legend>
    <span id="formerror" class="error"></span>
    <ol>
    <li>
    <label for="myname">Name *</label>
    <input type="text" name="myname" id="myname" title="Please enter your name" autofocus required placeholder="Last, First" />
    </li>
    <li>
    <label for="myemail">Email *</label>
    <input type="email" name="myemail" required id="myemail" autocomplete="off" />
    </li>
    <li>
    <label for="mypassword">Password *</label>
    <input type="password" name="mypassword" required id="mypassword" />
    </li>
    <li>
    <label for="mypasswordconf">Password *</label>
    <input type="password" name="mypasswordconf" required id="mypasswordconf" />
    </li>
    </ol>
    </fieldset>
    <fieldset id="other" class="hidden" title="Other Info">
    <legend>Other</legend>
    <ol>
    <li>
    <label for="mytelephone">Telephone *</label>
    <input type="tel" name="mytelephone" required id="mytelephone" pattern="\d{3}[\-]\d{3}[\-]\d{4}" placeholder="xxx-xxx-xxxx"/>
    </li>
    <li>
    <label for="myaddress">Address *</label>
    <input type="address" name="myaddress" required id="myaddress" placeholder="Street, City, and State" />
    </li>
    <li>
    <label for="myzip">Zip Code *</label>
    <input type="zip" name="myzip" required id="myzip" placeholder="xxxxx"/>
    </li>
    </ol>
    </fieldset>
    <fieldset id="comments" class="hidden" title="Comments">
    <legend>Comments</legend>
    <ol>
    <li>
    <label for="mycomments">Comment</label>
    <textarea name="mycomments" id="mycomments"></textarea>
    </li>
    </ol>
    <button type="submit">send</button>
    </fieldset>
    </form>
    <script>
    $(document).ready(function() {
    $("#myform").validate({
    "rules" : {
    "mypassword": {
    //must be 6 numbers or more
    "minlength" : 6,
    "required" : true },
    "mypasswordconf": {
    //must equal first password input
    "equalTo" : "#mypassword"}
    } //rules
    }); //validate
    }); //document ready
    </script>
    <script>
    $(document).ready(function() {
    $('#myform').submit(function() {
    var abort = false;
    $("div.error").remove();
    $(':input[required]').each(function() {
    //call to input required fields
    if ($(this).val()==='') {
    $(this).after('<div class="error">This is a required field</div>');
    abort = true;
    }
    }); // go through each required value
    if (abort) { return false; } else { return true; }
    })//on submit
    }); // ready

    $('input[placeholder]').blur(function() {
    $("div.error").remove();
    var myPlaceholder = $(this).attr('placeholder');
    var isValid = $(this).val().search(myPattern) >= 0;

    if (!isValid) {
    $(this).focus();
    $(this).after('<div class="error">Entry does not match expected pattern: ' + myPlaceholder + '</div>');
    } // isValid test
    }); // onblur
    </script>
    </body>
    </html>

    Thanks!

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,687
    maybe you forgot to link up the jquery?

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,599
    Testing if two boxes vontain the same, example...
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <script>
    function checkThis(o){
    	var pat = new RegExp( o.pwd1.value , "g" );
    	return pat.test(o.pwd2.value);
    }
    
    </script>
    </head>
    <body>
    <form id="form1" name="form1" method="post" action="javascript:;" onsubmit="return checkThis(this);">
      <p>
        <input type="password" name="pwd1" />
        <br />
        <input type="password" name="pwd2" />
    </p>
      <p>
        <input type="submit" name="Submit" value="Submit" />
    </p>
    </form>
    </body>
    </html>
    if you were to put an alert at the return point you will see the result of matching and non matching field entries.
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles