validating form. addEventListener not listening - javascript

OK so I have a form that I check to see if the user enters in a username in the username field. On top of that i also want to know what button what clicked, really im looking to see when the logout button is clicked. It seems to me that the addEventListener isn't registering the 'click' value when the form is submitted. both the buttons and the buttonLength have the right values when I run it with Firefox debugger. So my question is, how do I check the addEventListener value or if its getting passed? looking for some insight on what I'm doing wrong.
<!DOCTYPE html>
<html>
<head>
<title>Not empty</title>
</head>
<body>
<script>
function ValidateForm(frm){
var buttons = document.getElementsByName('adam');
var buttonsLength = buttons.length;
for (var i = 0; i < buttonsLength; i++){
buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
if(this.id == "logout"){
alert(this.id);
}else {
alert("not logout:" + this.id);
};
};
if (!frm.UserName.value) {
alert("You must enter your username.");
frm.UserName.focus();
return false;
}
return true;
}
</script>
<form method="post" action="test.html" onsubmit="return ValidateForm(this)">
<input type="input" name="UserName" value="">
<input type="password" name="Password" value="">
<button name="adam" id="login">login</button>
<button name="adam" id="sendMe">send me my password</button>
<button name="adam" id="logout">logout</button>
<form>
</body>

Maybe I'm wrong but I think you try to do the following:
<!DOCTYPE html>
<html>
<head>
<title>Not empty</title>
</head>
<body>
<form method="post" name="formname" action="test.html">
<input type="input" id="username" name="userName" value="">
<input type="password" id="password" name="Password" value="">
<button type="button" name="adam" id="login">login</button>
<button type="button" name="adam" id="sendMe">send me my password</button>
<button type="button" name="adam" id="logout">logout</button>
<form>
<script>
var buttons = document.getElementsByName('adam');
var buttonsLength = buttons.length;
for(var i=0;i<buttonsLength; i++){
buttons[i].addEventListener('click', clickResponse, false);
};
function clickResponse(){
var u, p;
u=document.getElementById('username');
p=document.getElementById('password');
switch(this.id) {
case 'logout':
alert('Logout '+this.id);
break;
case 'login':
if(u.value.length==0 ||
p.value.length==0) {
alert("Please enter your unsername and password.");
if(u.length==0) {
u.focus();
} else {
p.focus();
}
} else {
alert('submit');
//document.forms.formname.submit();
}
break;
case 'sendMe':
if(u.value.length==0) {
alert("Please enter your username.");
u.focus();
return false;
} else {
alert('submit');
//document.forms.formname.submit();
}
break;
}
};
</script>
</body>
So, you need to assign listeners before click, then I guessed you want to capture click check button id (command to execute) and then check if user and pass are fullfilled depending the button clicked, if so then submit the form... I've changed your code but I think is what you're looking for.
Hope it helps!!!

Your code is a little messy and hard to understand exactly what you need.
That being said, you should use onclick attributes to bind the buttons to 3 separate functions.
Inside those functions you can get ahold of any dom nodes you need to preform login/logout/sendMe functionality.
Like so:
<!DOCTYPE html>
<html>
<head>
<title>Not empty</title>
</head>
<body>
<script>
function login(){
alert('login function');
// do what you need to here to login
var username = document.getElementsByName('input-username').value;
var password = document.getElementsByName('input-password').value;
if (!username){
alert("You must enter your username.");
}else if (!password){
alert("You must enter your password.");
}
}
function sendMe(){
alert('sendMe function');
// sendMe functionality here
}
function logout(){
alert('logout function');
// logout functionality here
}
</script>
<form method="post" action="test.html">
<input id='input-username' type="input" name="UserName" value="" />
<input id='input-password' type="password" name="Password" value="" />
<button id="login" onClick="login()">login</button>
<button id="sendMe" onClick="sendMe()">send me my password</button>
<button id="logout" onClick="logout()">logout</button>
<form>
</body>

Related

Javascript: why setCustomValidaty doesn't show up on first submission but it does on the second?

I'm trying to validate a login form but I cannot understand the reason why when I give a wrong input the message from setCustomValidation doesn't show up the first time I click on the submit button (actually input). However when I click on the same button a second time the error message appears as it should. Why is that?
Here's the code.
function validate(){
console.log("check validate()")
var email = document.getElementById("email");
var psw = document.getElementById("psw");
const patt = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (email.value=="" && psw.value==""){
email.setCustomValidity("You need to insert email and password!");
return false;
}
else if ( email.value==""){
email.setCustomValidity("Insert your email address");
return false;
}
else if (psw.value==""){
psw.setCustomValidity("Insert password");
return false;
}
else if ( !patt.test(email.value) ){
email.setCustomValidity("This is not an email!");
console.log("Subcase works");
return false;
}
}
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Game</h1>
<div>
<form onsubmit="return validate()" method="POST" action="login.php">
<input id="email" type="text" placeholder="email">
<input id="psw" type="password" placeholder="password">
<input type="submit" id="login-btn" value="Accedi">
</form>
</div>
</body>
</html>
Firstly, according to the documentation for setCustomValidity:
You must call the reportValidity method on the same element or nothing will happen.
The reason it works the second time is because when the custom validity message is set, when the "submit" button is clicked again, the browser's built-in form validation takes over and blocks the submit. That is why you do not see the "check validate()" message in the console log on subsequent submits.
Therefore, merely adding something like email.reportValidity() after your email.setCustomValidity is not a solution because on subsequent submits, the submit event handler will not get called, because the form never gets submitted due to the non-null custom validity message. If you try this, you will see that you get the same error message even after filling out the email and password fields. To fix this, you can either add novalidate to the form to bypass the browser validation, or you can clear the custom validity message when the input changes using the input's onchange event.
Here is a working example by adding novalidate to the form and using reportValidity().
function validate(){
console.log("check validate()")
var email = document.getElementById("email");
var psw = document.getElementById("psw");
const patt = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (email.value=="" && psw.value==""){
email.setCustomValidity("You need to insert email and password!");
email.reportValidity();
return false;
}
else if ( email.value==""){
email.setCustomValidity("Insert your email address");
email.reportValidity();
return false;
}
else if (psw.value==""){
psw.setCustomValidity("Insert password");
psw.reportValidity();
return false;
}
else if ( !patt.test(email.value) ){
email.setCustomValidity("This is not an email!");
email.reportValidity();
console.log("Subcase works");
return false;
}
}
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Game</h1>
<div>
<form onsubmit="return validate()" method="POST" action="login.php" novalidate>
<input id="email" type="text" placeholder="email">
<input id="psw" type="password" placeholder="password">
<input type="submit" id="login-btn" value="Accedi">
</form>
</div>
</body>
</html>
Here is a working example using the onchange event on the input fields and using reportValidity(). Notice in this case, the onsubmit handler is only called after the validity message has been cleared and not every time you click the submit button.
function validate(){
console.log("check validate()")
var email = document.getElementById("email");
var psw = document.getElementById("psw");
const patt = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (email.value=="" && psw.value==""){
email.setCustomValidity("You need to insert email and password!");
email.reportValidity();
return false;
}
else if ( email.value==""){
email.setCustomValidity("Insert your email address");
email.reportValidity();
return false;
}
else if (psw.value==""){
psw.setCustomValidity("Insert password");
psw.reportValidity();
return false;
}
else if ( !patt.test(email.value) ){
email.setCustomValidity("This is not an email!");
email.reportValidity();
console.log("Subcase works");
return false;
}
}
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Game</h1>
<div>
<form onsubmit="return validate()" method="POST" action="login.php">
<input id="email" type="text" placeholder="email" onchange="event.target.setCustomValidity('')">
<input id="psw" type="password" placeholder="password" onchange="event.target.setCustomValidity('')">
<input type="submit" id="login-btn" value="Accedi">
</form>
</div>
</body>
</html>

Javascript | Simple Form Validation Wont Work

I have been working on this really simple login, where all i want to do is say, if the password is "apple" and password is "123" then link me to another page when i click submit button.
I gave up on the submit button linking portion but i still don't understand why my code won't register, everything looks right to me
<!DOCTYPE html>
<html>
<body>
<form name="loginForm">
<input type="text" name="username" placeholder="Username" value=""/>
<input type="password" name="password" placeholder="Password" value=""/>
<input type="button" name="submit" value="Login" onclick="validate()" />
</form>
<script type="text/javascript">
function validate() {
var user = document.loginForm.username.value;
return user;
var pass = document.loginForm.password.value;
return pass;
if ( (user=="apple") && (pass=="123") ) {
document.write("It worked");
} else {
document.write("Wrong Password");
}
}
</script>
</body>
</html>
Suggestions:
return keyword will exit the function, so the code after return won't be reached. To remove the two 'return' statement is the first step.
document.write will clear the page after document is loaded. You probably need alert function
try using document.getElementById/getElementByName (which is better) instead of document.loginForm...
It is also better to put onsubmit in the form tag (fired after type=submit button is clicked) instead of onclick event for button.
It is better to put Javascript inside the HTML head tag.
Below is a much better/working version:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function validate() {
var user = document.getElementById("username").value;
var pass = document.getElementById("password").value;
if ( (user=="apple") && (pass=="123") ) {
alert("It worked");
return true;
} else {
alert("Wrong password");
return false;
}
}
</script>
</head>
<body>
<form action="" onsubmit='javascript:return validate()'>
<input type="text" id="username" placeholder="Username" value=""/>
<input type="password" id="password" placeholder="Password" value=""/>
<input type="submit" value="Login" />
</form>
</body>
</html>

Validate on submit button got issue

Here is my code example
<form action="next2.php" method="post" name="next2" id="next2" onsubmit="return submitForm();">
Below is my function
<script type="text/javascript">
function submitForm()
{
var name = document.getElementById("name").value;
return false;
}
</script>
On press, the form still submit, but if i change
onsubmit="return false;"
then the form won't submit, how do I use the function to return false as i need do some if else validation
<script type="text/javascript">
function submitForm() {
return false;
}
</script>
<form
action="next2.php"
method="post"
name="next2"
id="next2"
onsubmit="return submitForm();"
>
submit is already a function for the form, you should call your JavaScript function something different, for instance submitForm as in the above.
just remove the semicolon in your function and place a alert in your function to make sure whether the function is called first.and then try to add validation
I like to make an invisible button for the actual submit which is only triggered after form validation:
function validate() {
var valid = true;
$.each($('input'), function(){
valid = valid && $(this).val().length > 0;
})
if (valid) {
$('#realSubmit').click();
} else {
alert('Please fill out all fields!');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="next2.php" method="post" name="next2" id="next2" onsubmit="return submit();">
<input type="text" placeholder="Enter Name" />
<input type="password" placeholder="Enter Password" />
<button type="button" onclick="validate()">Submit</button>
<button type="submit" id="realSubmit" style="display:none"></button>
</form>

More Simple Password System Stuff

Sorry guys, first time playing around with this. Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>SuM BUTtonsS DOe</title>
<link rel="stylesheet" href="buttons.css"/>
</head>
<body>
<p>Please enter the password</p>
<form id="enter" onSubmit="javascript:passCheck()">
<input id="password" type="password" placeholder="Password">
</form>
<p id="incorrect"><em>INCORRECT PASSWORD</em></p>
<script type="text/javascript">
function passCheck() {
var input = document.getElementById('password').value;
if (input == 'herro') {
window.alert("IT WORKS!!");
}
else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
}
}
</script>
</body>
</html>
When I enter the wrong password, INCORRECT PASSWORD comes up, but only for a fraction of a second. Then it's gone again. No idea why.
UPDATE:
<!DOCTYPE html>
<html>
<head>
<title>SuM BUTtonsS DOe</title>
<link rel="stylesheet" href="buttons.css"/>
</head>
<body>
<p>Please enter the password</p>
<form id="enter" onSubmit="javascript:passCheck()">
<input id="password" type="password" placeholder="Password">
</form>
<p id="incorrect"><em>INCORRECT PASSWORD</em></p>
<script type="text/javascript">
function passCheck() {
var input = document.getElementById('password').value;
if (input == 'herro') {
window.alert("IT WORKS!!");
}
else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
return false;
}
}
</script>
</body>
</html>
On submit, the form will trigger the default action, which in this case is to submit the contents to the same page (for lack of an action property).
So what you're seeing is the JavaScript runs and changes the style to show the error message, then the page reloads.
To ensure the page doesn't reload put return false at the end of passCheck. Better would be to use addEventListener and event.preventDefault(), but that's a little bit more involved.
<p>Please enter the password</p>
<form id="enter" onSubmit="passCheck(); return false;">
<input id="password" type="password" placeholder="Password">
<input type="submit" value="Submit"/>
</form>
<p id="incorrect" style="display: none"><em>INCORRECT PASSWORD</em></p>
<script type="text/javascript">
function passCheck() {
var input = document.getElementById('password').value;
if (input == 'herro') {
window.alert("IT WORKS!!");
}
else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
}
}
</script>

Unable to get Alert Pop-Up on IE...Works fine in Firefox,Chrome etc.?

I am trying to get pop-up block when there is no text/blank space. It is working fine in Firefox, Chrome &Safari.
Please check below code in my JavaScript file-:
function submitQuestion(URL,docId,errorMessage)
{
var question = $('textField').value;
if(!question.blank())
{
var submitForm = $("question-form");
submitForm.action = URL+"docId="+docId+"&question="+encodeURIComponent(question);
//alert(submitForm.action);
submitForm.submit();
}
else
{
alert(errorMessage);
return false;
}
}
Above function works fine in Firefox,Safari &Chrome as when there is nothing in textbox (i.e. empty/blank) then it goes to else &prompt errorMessage as a pop-up but in IE, it doesn't go to else &errorMessage pop-up never come.
Please check below code for my forntend form-:
<form method="POST" id="question-form" onsubmit="return submitQuestion('https://localhost/question-post!input.jspa?','ABC12','Enter your question!');">
<span class="fieldwrap">
<input type="text" placeholder="Ask customers about this document" value="" maxlength="255" autocomplete="off" class="questionInputField" id="textField">
</span>
<div class="clear"></div>
<div id="question-submit" class="widget-div clearfix">
<input type="submit" value="Submit question to the portal" class="questionSubmitFormButton">
</div>
</div>
</form>
What happened here in IE is it will take placeholder as a value for text field when we didn't provide any i.e. When we keep text field empty or blank then it will take placeholder as a text field value &instead of giving pop-up alert, it goes to if loop which should not be a case.
To access the value of the textField using jQuery, you should use val() instead of value.
var question = $('textField').val();
if (question != '') {
//
}
else {
//
}
Below is a working example:
<!DOCTYPE html>
<head>
<title>EXAMPLE</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function submitQuestion(URL, docId, errorMessage) {
var question = $('#textField').val();
if (question.trim() != "") {
var submitForm = $("#question-form");
submitForm.attr("action", URL + "docId=" + docId + "&question=" + encodeURIComponent(question));
return true;
}
else {
alert(errorMessage);
return false;
}
}
</script>
</head>
<body>
<form method="POST" id="question-form" onsubmit="return submitQuestion('https://localhost/question-post!input.jspa?','ABC12','Enter your question!');">
<span class="fieldwrap">
<input type="text" placeholder="Ask customers about this document" value="" maxlength="255" autocomplete="off" class="questionInputField" id="textField">
</span>
<div class="clear"></div>
<div id="question-submit" class="widget-div clearfix">
<input type="submit" value="Submit question to the portal" class="questionSubmitFormButton">
</div>
</form>
</body>

Categories