user5474108 user5474108 - 6 months ago 16
jQuery Question

Form validation click event fires on all inpout fields prematurely. I aslo need help to to store and compare sign in to login at later point

I am having trouble with validating my form inputs on my click event. The click event fires in each of my inputs on my form which then checks for validation before all fields are filled. I need to be able to submit and check for validation at the same event. Ive tried so many things I cant list them all.
I see that my click event needs to be on my anchor tag with the submit image or all inputs will respond to click event, but the username and password will not validate when I put a

onclick="return checkForm(this);
in the opening anchor tag. I also tried changing my anchor tag to a button and a div. I tried using jquery to make it work and failed.
I ultimately need the password and username to be stored and code written to check for login validation as well...
I have considered many different ways and each have failed.To many to list.
Help!

Having a alert pop up each time the user switches inputs is very anoying indeed.
I am new at this so I apologize for any incorrect or unorthodox coding and posting. Corrections and advice is welcomed and all assistance is appreciated greatly.

My code follows:

<!DOCTYPE html><!--this is where I got my password info-->
<html lang="en"><!--http://www.the-art-of-web.com/javascript/validate-password/#box1-->
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery_library.js"></script>
<script type="text/javascript">

alert("Sign up please");

function checkForm(form)
{
if(form.username.value == "") {
alert("Error: Username cannot be blank!");
form.username.focus();
return false;
}
re = /^\w+$/;
if(!re.test(form.username.value)) {
alert("Error: Username must contain only letters, numbers and underscores!");
form.username.focus();
return false;
}

if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
if(form.pwd1.value.length < 6) {
alert("Error: Password must contain at least six characters!");
form.pwd1.focus();
return false;
}
if(form.pwd1.value == form.username.value) {
alert("Error: Password must be different from Username!");
form.pwd1.focus();
return false;
}
re = /[0-9]/;
if(!re.test(form.pwd1.value)) {
alert("Error: password must contain at least one number (0-9)!");
form.pwd1.focus();
return false;
}
re = /[a-z]/;
if(!re.test(form.pwd1.value)) {
alert("Error: password must contain at least one lowercase letter (a-z)!");
form.pwd1.focus();
return false;
}
re = /[A-Z]/;
if(!re.test(form.pwd1.value)) {
alert("Error: password must contain at least one uppercase letter (A-Z)!");
form.pwd1.focus();
return false;
}
} else {
alert("Error: Please check that you've entered and confirmed your password!");
form.pwd1.focus();
return false;
}


alert("You entered a valid password: " + form.pwd1.value);

return true;
}
</script>
/*clears my inputs*/
<script>
$(document).ready(function() {
$('input' ).on('click focusin', function() {
this.value = '';
});


});
</script>
/*enters my password into a variable for storage and futer login validation */
/*I amdoing the same thing for my username later...*/
<script>
$(document).ready(function() {
$('img[name="mySubmitButton"]').on('click focusin', function() {
$('input[name="passwordHolder"]').val($('input[name="pwd1"]').val());
});


});
</script>
</head>
<body>

<input style="visibility:hidden;" type="text" name="passwordHolder" value="This is your saved pasword:"/>
<h1>user sign in</h1>
<h2>You must complete and submit the form to get back to home page</h2>
<form onclick="return checkForm(this);">
<p>Username: <input type="text" name="username" value="enter your user name." autofocus="autofocus"></p>
<p>Password: <input type="password" name="pwd1"id="myPassword" ></p>
<p>Confirm Password: <input type="password" name="pwd2"></p>
<p><img src="img/submitButtonExitOverlayNewsletter.png" name="mySubmitButton" value="submit" value="Re-enter your password."/></p>

<a href="index.html" style="background-image: url(img/homepage%20button.gif)"> home Page</a>

</form>
</body>
</html>

Answer

You have to use onsubmit instead of onclickand add <input type="submit" /> for onsubmit to work

If you want to style the submit button refer how-can-i-make-my-input-type-submit-an-image

For resetting of form use document.getElementById('myform').reset();

    <!DOCTYPE html><!--this is where I got my password info-->
<html lang="en"><!--http://www.the-art-of-web.com/javascript/validate-password/#box1-->
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <meta charset="UTF-8">
    <title></title>
    
    <script type="text/javascript">

        alert("Sign up please");

        function checkForm(form)
        {
            if(form.username.value == "") {
                alert("Error: Username cannot be blank!");
                form.username.focus();
                return false;
            }
            re = /^\w+$/;
            if(!re.test(form.username.value)) {
                alert("Error: Username must contain only letters, numbers and underscores!");
                form.username.focus();
                return false;
            }

            if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
                if(form.pwd1.value.length < 6) {
                    alert("Error: Password must contain at least six characters!");
                    form.pwd1.focus();
                    return false;
                }
                if(form.pwd1.value == form.username.value) {
                    alert("Error: Password must be different from Username!");
                    form.pwd1.focus();
                    return false;
                }
                re = /[0-9]/;
                if(!re.test(form.pwd1.value)) {
                    alert("Error: password must contain at least one number (0-9)!");
                    form.pwd1.focus();
                    return false;
                }
                re = /[a-z]/;
                if(!re.test(form.pwd1.value)) {
                    alert("Error: password must contain at least one lowercase letter (a-z)!");
                    form.pwd1.focus();
                    return false;
                }
                re = /[A-Z]/;
                if(!re.test(form.pwd1.value)) {
                    alert("Error: password must contain at least one uppercase letter (A-Z)!");
                    form.pwd1.focus();
                    return false;
                }
            } else {
                alert("Error: Please check that you've entered and confirmed your password!");
                form.pwd1.focus();
                return false;
            }

//Use this to reset your form 
//          document.getElementById('myform').reset();

            alert("You entered a valid password: " + form.pwd1.value);

            return true;
        }
    </script>
    /*clears my inputs*/
    <script>
      //You don't have to use this this will reset your values even on click and focusin
       // $(document).ready(function() {
         //   $('input' ).on('click focusin', function() {
           //     this.value = '';
           // });


        // });
    </script>
    /*enters my password into a variable for storage and futer login validation */
    /*I amdoing the same thing for my username later...*/
    <script>
        $(document).ready(function() {
            $('img[name="mySubmitButton"]').on('click focusin', function() {
                $('input[name="passwordHolder"]').val($('input[name="pwd1"]').val());
            });


        });
    </script>
</head>
<body>

<input style="visibility:hidden;" type="text" name="passwordHolder" value="This is your saved pasword:"/>
<h1>user sign in</h1>
<h2>You must complete and submit the form to get back to home page</h2>
<form onsubmit="return checkForm(this);" id="myform">
    <p>Username: <input type="text" name="username" value="enter your user name." autofocus="autofocus"></p>
    <p>Password: <input type="password" name="pwd1"id="myPassword" ></p>
    <p>Confirm Password: <input type="password" name="pwd2"></p>
    <p><img  src="img/submitButtonExitOverlayNewsletter.png" name="mySubmitButton" value="submit" value="Re-enter your password."/></p>

    <a href="index.html"  style="background-image: url(img/homepage%20button.gif)"> home Page</a>
  <input type="submit" name="submit" value="submit" />

</form>
</body>
</html>

Comments