I am facing issues with validating form inputs when a click event occurs. Whenever a user clicks inside any input field in my form, the validation process begins even before all fields are filled out. I need a solution where I can submit the form and ensure proper validation at the same time. Despite trying numerous approaches, none of them seem to work.
I have identified that the click event should be attached to the anchor tag with the submit image, otherwise, all input fields will respond to the click event but fail to validate the username and password upon adding onclick="return checkForm(this); in the opening anchor tag. I also attempted changing the anchor tag to a button or a div, as well as using jQuery for implementation without success.
To sum up, I require effective storage of username and password data followed by login validation code...
I have explored several alternatives, all leading to failure, too many to enumerate.
Help!
Constantly receiving alerts every time a user switches between input fields is incredibly frustrating. Given my limited experience in this area, I apologize for any incorrect coding practices and posting quirks. Corrections and advice from seasoned individuals are warmly welcomed and greatly appreciated.
Here is an excerpt of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery_library.js"></script>
<script type="text/javascript">
alert("Please sign up");
function checkForm(form)
{
// Validation logic
}
</script>
/* Additional script snippets */
</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 return to the homepage.</h2>
<form onclick="return checkForm(this);">
<p>Username: <input type="text" name="username" value="Enter your username." 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>