I have created a form requiring email validation. So user must type in their email address twice and if they don't match they won't be able to submit. I did this by simply comparing the values of email fields 1 and 2. If they match "disabled" is removed from the submit button.
All was working perfectly when I had the value set to "Insert your email address and "confirm your email address again". However, so that the user does not have to delete that text, I removed the value and used "placeholder" in the HTML instead.
The problem now is that the moment you type anything it's returning as true. I guess it's seeing the blank values as the same, but it's not picking up on the changes to the value as the user types it in.
Why are the two fields always returning as a match?
<html>
<body>
<form class="theForm">
<p> Subscribe to my mailing list</p>
<input type="text" id="name" class="fields" name="name" placeholder="Name">
<input type="text" id="email1" class="fields" name="email" placeholder="Email Address" >
<input type="text" id="email2" class="fields" placeholder="Confirm Email Address" >
<input name="submit" id="submit" class="fields" type="submit" disabled value="Email Addresses
Do Not Match">
</form>
<script>
function verify (){
console.log(`email1.value: ${email1}: Email2: ${email2}`);
if(document.getElementById("email1").value === document.getElementById("email2").value) {
document.getElementById("submit").removeAttribute("disabled");
document.getElementById("submit").style.backgroundColor = "#004580";
document.getElementById("submit").style.cursor = "pointer";
} else {
document.getElementById("submit").setAttribute("disabled", "disabled");
}
}
$(".fields").on("change paste keyup", verify);
</script>
</body>
</html>
try this
<html>
<body>
<form class="theForm">
<p> Subscribe to my mailing list</p>
<input type="text" id="name" class="fields" name="name" placeholder="Name">
<input type="text" id="email1" class="fields" name="email" placeholder="Email Address" >
<input type="text" id="email2" class="fields" placeholder="Confirm Email Address" >
<input id="submit" type="button" onclick="verify()" value="click">
</form>
<script>
function verify()
{
if(document.getElementById("email1").value === document.getElementById("email2").value) {
alert("matched")
} else {
document.getElementById("submit").setAttribute("disabled", "disabled");
alert("not matched")
}
}
</script>
</body>
</html>
This worked for me:
Change the email inputs to [type='email'].
Add the required attribute to #email1.
Add a check to the validity of #email1 in your conditional.
Reset styles to initial (or what you prefer) if the button is reset back to 'disabled'.
Use 'input' event to get the the values updating on every keystroke, 'change' only fires on 'blur' or when the form is submitted.
It'd end up looking like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<form class="theForm">
<p> Subscribe to my mailing list</p>
<input type="text" id="name" class="fields" name="name" placeholder="Name">
<input type="email" id="email1" class="fields" name="email" placeholder="Email Address" required>
<input type="email" id="email2" class="fields" placeholder="Confirm Email Address" >
<input name="submit" id="submit" class="fields" type="submit" disabled value="Email Addresses Do Not Match">
</form>
<script>
function verify (){
console.log(`email1: ${email1.value}: Email2: ${email2.value}`);
if(document.getElementById("email1").checkValidity() && document.getElementById("email1").value === document.getElementById("email2").value) {
document.getElementById("submit").removeAttribute("disabled");
document.getElementById("submit").style.backgroundColor = "#004580";
document.getElementById("submit").style.cursor = "pointer";
} else {
document.getElementById("submit").setAttribute("disabled", "disabled");
document.getElementById("submit").style.backgroundColor = "initial";
document.getElementById("submit").style.cursor = "initial";
}
}
$(".theForm").on("input paste keyup", "input[type=email]", verify);
</script>
</body>
</html>
MDN Docs for input and change events:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
Instead of:
$(".fields").on("change paste keyup", verify)
Try:
$(".fields").blur(verify)
EDIT:
How about:
$("#email2").blur(verify)
?
Related
I have a page with multiple text boxes, all of which are not required fields (i.e. the user can fill out as many as they wish to). However, I am not able to get autofocus to work from the second text box onwards and the form submits instead when I press enter to move into the next text box (probably because the inputs are not required). Is there a way such that I will be able to autofocus into the next text box after keying in the response for the previous textbox even if the field is not required/stop the form from submitting? Thanks for any help!
<html>
<main>
<form>
<br><label for="response1"><b>Animals</b></label><br>
<input type="text" id="response1" name="response1" autocomplete="off" autofocus ></br>
<br><input type="text" id="response2" name="response2" autocomplete="off" ></br>
<br><input type="text" id="response3" name="response3" autocomplete="off" ></br>
<br><input type="text" id="response4" name="response4" autocomplete="off" > </br>
<button type="submit">Submit</button>
</form>
</main>
</html>
try doing this, its supposed to make the enter to submit only on the last input, and the other times it just moves to the next input.
Dont forget to add the onkeydown to all the inputs except the last one.
<form>
<br><label for="response1"><b>Animals</b></label><br>
<input type="text" id="response1" name="response1" autocomplete="off" autofocus onkeydown="next(this, event)"></br>
<br><input type="text" id="response2" name="response2" autocomplete="off" onkeydown="next(this, event)"></br>
<br><input type="text" id="response3" name="response3" autocomplete="off" onkeydown="next(this, event)"></br>
<br><input type="text" id="response4" name="response4" autocomplete="off"> </br>
<button type="submit">Submit</button>
</form>
<script>
function next(currElement, e) {
if (e.keyCode === 13) {
e.preventDefault();
let nextNum = parseInt(currElement.id.substr(8)) + 1;
document.getElementById('response' + nextNum).focus();
return false;
}
}
</script>
Please take a look at this code, I want to know how to validate all these input elements in this single form using JavaScript.
I know they look the same but i have the names in a separate div. Your corrections and contributions to my form will be very much appreciated.
<form name="myForm">
<input type="text" name="fname"><br><br>
<input type="text" name="fname"><br><br>
<input type="text" name="fname"><br><br>
<input type="text" name="fname"><br><br>
<input type="text" name="fname"><br><br>
<input type="password" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
Yes, You can. Try this to Validate data in Java Script
<form name="myForm" onsubmit="return validateData()">
<input type="text" id="name" name="fname"><br><br>
<input type="text" id="username" name="username"><br><br>
<input type="text" id="email" name="email"><br><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
Then You have to create a javaScript Function to Validate the data as above validateDate(), for this, now your code is
<script>
function validateData() {
var fname = document.getElementById("fname").value;
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var password = document.getElementById("password").value;
//if name is empty
if(fname == "" || username == "" || email == "" || password == "") {
//SOme Error Code here
alert("Please Fill All the Form Data.");
}
if(username.length < 4 || username.length > 20) {
//SOme Error Code here
alert("username must be less than 20 but more than 4 Characters.");
}
// You can add more filters like password length, and so on by using more if conditions
}
</script>
<body>
<form name="myForm" onsubmit="return validateData()">
<input type="text" id="name" name="fname"><br><br>
<input type="text" id="username" name="username"><br><br>
<input type="text" id="email" name="email"><br><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
That's all. :)
Even though this requires jQuery, it can solve your problem:
To use jQuery Validate you just need to include in your code a version of the jQuery library equal or more recent than 1.7 and a file with the plugin.
See an example:
jQuery('form').validate();
After calling the jQuery.fn.validate method, you can validate your fields using data attributes, that are valid to the HTML5, according to the W3C.
See a example to required field:
<form>
<input type="text" data-required />
</form>
https://plugins.jquery.com/validate/
Why is the hidden form not shown when it looses focus? The alert is coming up nicely when leaving the input but the other hidden form is still not there.
html
<body>
<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">
</body>
javascript
window.onload = function() {
$("#myinput").blur(myAlert);
};
function myAlert() {
alert("This input field has lost its focus.");
$("#validation_message_email").show();
}
You can't display a hidden input like that.A span will suit better for this purpose,
<input type="text" id="myinput" value="">
<span style="display:none" id="validation_message_email">enter a valid email</span>
validation_message_email doesn't have its display style property as none, so show() will not make it visible from type="hidden".
You need to replace
$("#validation_message_email").show();
with
$("#validation_message_email").attr( "type", "text" );
However, if the intent is to only show a message, then you don't need to use a hidden input for the same.
<body>
<input type="text" id="myinput" value="">
</body>
and
window.onload = function() {
$("#myinput").blur(function(){
alert("This input field has lost its focus.");
$(this).append('<span id="emailValidationMessage">enter a valid email</span>')
});
$("#myinput").focus(function(){
$("#emailValidationMessage").remove();
});
};
No need to use type="hidden" as hidden elements are not display:none they are hidden by default.
Use type="text" and hide it with css and show where you want
<input type="text" id="myinput" value="" style="display:none;">
use like this
<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">
<script>
window.onload = function() {
$("#myinput").blur(myAlert);
};
function myAlert() {
$("#validation_message_email").attr("type","text");
}
</script>
<div class="form-group" id="usernamediv">
<input class="form-control" name="username" id="username"
placeholder="Username" type="text" required=""> </div>
<div class="form-group" id="passworddiv">
<input name="password" class="form-control" id="password" placeholder="Password" type="password" required="">
</div>
<button id="#loginButton">Login</button>
<button id="#forgotpassword">Forgot Password</button>
<script>
$("#forgotpassword").hide();
$("#forgotpassword").click(function(e){
$("#loginButton").hide();
$("#usernamediv").show();
$("#passworddiv").hide();
})
</script>
Check this jsfiddle link, it might help you.
$("#myinput").blur( function(){
myAlert();
});
function myAlert() {
$("#validation_message_email").attr("type", "text");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input type="text" id="myinput" value="">
<input type="hidden" id="validation_message_email" value="enter a valid email">
<form action="surl.php" method="get" id="surl">
<input type="text" placeholder="name of column" name="column_name"/>
<textarea placeholder="description for column name" name="description"></textarea>
<div class="surl"><input type="url" placeholder="first url" name="url1"/></div>
<div class="surl"><input type="url" placeholder="second url" name="url2"/></div>
<div class="surl"><input type="url" placeholder="third url" name="url3"/></div>
<input type="submit" class="surl_submit">
</form>
if one of my input fields or textarea is empty while submit button click, i don't want to post the form.how can i control this form's input and textarea fields at the same time instead of controling one by one?
Call the validation function on click of submit and submit form only when if the all requirements are fullfilled.
DEMO
HTML
<form action="surl.php" method="get" id="surl">
<input id="mytext1" type="text" placeholder="name of column" name="column_name" value="" />
<textarea id="mytext2" placeholder="description for column name" name="description"></textarea>
<div class="surl"><input class="inputUrl" type="url" placeholder="first url" name="url1" value=""/></div>
<div class="surl"><input class="inputUrl" type="url" placeholder="second url" name="url2" value=""/></div>
<div class="surl"><input class="inputUrl" type="url" placeholder="third url" name="url3"/ value=""></div>
<input type="submit" class="surl_submit" onclick="return validateForm()" value="submit">
</form>
SCRIPT
function validateForm(){
var input1 = document.getElementById('mytext1');
var textarea1 = document.getElementById('mytext2');
var allInputs = document.getElementsByClassName('inputUrl');
for(var i=0; i<allInputs.length; i++){
if(!allInputs[i].value){
return false;
}
}
if(!input1.value){
return false;
}else if(!textarea1.value){
return false;
}
}
Add a class to the input/textarea tags, call a function on submit and do something like this:
document.querySelector('.surl_submit').onclick = function(e) {
var input = document.getElementsByClassName('classname');
var i = input.length;
while(i--) {
if(input[i].value == '') {
// you could display some sort of message here
e.preventDefault();
return;
}
}
};
you can add a class for all relevant fields somthing like: "tovalidate" and using jquery:
if ($('.tovalidate').filter(function(){return $(this).val()=='';}).length>0)
//do not submit
else
//submit
I've got the following "subscribe by e-mail" form:
<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=food101coil', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>enter e-mail:</p>
<p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="food101coil" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="SEND" /></form>
I want to move the "enter e-mail" section inside the form part. So that when the user clicks on it, the text will disappear.
Could someone please help me with how to do that?
The following code will do what you want, but also maintain an email once entered..
HTML
<input id="email" type="text" style="width:140px" name="email" value="enter e-mail"/>
JavaScript
<script type="text/javascript">
var emailfield = document.getElementById('email');
emailfield.onfocus = function(){
if (this.value == 'enter e-mail') this.value = '';
}
emailfield.onblur= function(){
if (this.value == '') this.value = 'enter e-mail';
}
</script>
Live example: http://www.jsfiddle.net/YS2Xm/
<input type="text" name="email" onclick="this.value='';" value="enter e-mail" />
Not tested, should work though!