the validation message does not disappear after adding the right value - javascript

I have a login page and I added a validation that whenever the input is empty you can't login, I want the validation message to disappear whenever the user has entered some input. I hope it is clear. here is my code:
function Validation() {
var x = document.getElementById("username").value;
var y = document.getElementById("password").value;
if (x == "") {
document.getElementById("demo1").innerHTML = "*please write name";
} else {
document.getElementById("demo1").innerHTML = "";
}
if (y == "") {
document.getElementById("demo2").innerHTML = "*please write password";
return false;
} else {
document.getElementById("demo2").innerHTML = "";
}
}
<div id="form-wrapper">
<label for="username">UserName </label>
<input type="text" id="username" name="myuser" /><span class="validation" id="demo1"> </span>
<br/> <br/>
<label for="password"> Password </label>
<input type="password" id="password" name="mypassword" />
<span class="validation" id="demo2"> </span>
<br />
<input type="submit" id="login" value="Log in" onclick="return Validation()" /> <br />
<input type="checkbox" checked="checked" /> Remember me
</div>

You need to call your Validation() function as soon as the user starts typing in the password or username box. You can achieve it by onkeyup event like
<input type="password" id="password" name="mypassword" onkeyup="Validation()" />
function Validation() {
var x = document.getElementById("username").value;
var y = document.getElementById("password").value;
if (x == "") {
document.getElementById("demo1").innerHTML = "*please write name";
} else {
document.getElementById("demo1").innerHTML = "";
}
if (y == "") {
document.getElementById("demo2").innerHTML = "*please write password";
return false;
} else {
document.getElementById("demo2").innerHTML = "";
}
}
<div id="form-wrapper">
<label for="username">UserName </label>
<input type="text" id="username" name="myuser" onkeyup="Validation()"/><span class="validation" id="demo1"> </span>
<br/> <br/>
<label for="password"> Password </label>
<input type="password" id="password" name="mypassword" onkeyup="Validation()" />
<span class="validation" id="demo2"> </span>
<br />
<input type="submit" id="login" value="Log in" onclick="return Validation()" /> <br />
<input type="checkbox" checked="checked" /> Remember me
</div>

Related

Trying To Match Two Fields Before Form Submit With Javascript

I am trying to match two fields with the result in my javascript before the form gets submitted but not working.
I don't want the form to get submitted if the results don't match.
Please what is the solution? Thanks.
Code Below;
function Check(){
var done=0;
var check=document.check.phone.value;
var check=document.check.pcode.value;
if (phone=="08023" && pcode=="12345") {
alert ("Result Match!");
done=1;
return fasle;
}
if (done==0) {
alert("Result Don't Match!");
}
}
<form action=" " method="post">
<input name="phone" maxlength="11" type='tel' id="phone" placeholder="0000-000-0000" required="" />
<br/><br/>
<input name="pcode" maxlength="11" type='tel' id="pcode" placeholder="0000-000-0000" required="" />
<br/><br/>
<button class="button" onClick="javascript:Check()" name="Submit" type="submit" value="Login"><span>Log In </span></button>
</form>
You have several mistakes in your code, I have cleaned it up a bit for you.
function Check() {
var done = 0;
var phone = document.check.phone.value;
var pcode = document.check.pcode.value;
if (phone=="08023" && pcode=="12345") {
alert("Result Match!");
done = 1;
} else {
alert("Result Don't Match!");
}
}
<form name="check" action=" " method="post">
<input name="phone" maxlength="11" type='tel' id="phone" placeholder="0000-000-0000" required="" />
<br /><br />
<input name="pcode" maxlength="11" type='tel' id="pcode" placeholder="0000-000-0000" required="" />
<br /><br />
<button class="button" onClick="javascript:Check()" name="Submit" type="submit" value="Login">
<span>LogIn</span></button>
</form>

Javascript form validation errors

I am trying to setup a registration form by using javascript to confirm if the user typed something into each input field. Right now, If I click the submit button, nothing happens :(.
<form name="registration" id="registration">
<label class="registration-spacing">
<input id="first-name-registration" type="text" name="first-name-registration" placeholder="First Name" size="35">
</label>
<label class="registration-spacing">
<input id="last-name-registration" type="text" name="last-name-registration" placeholder="Last Name" size="35">
</label>
<label class="registration-spacing">
<input id="date-of-birth-registration" type="text" name="date-of-birth-registration" placeholder="Date of Birth" size="35">
</label>
<label class="registration-spacing">
<input id="email-registration" type="text" name="email-registration" placeholder="Email" size="35">
</label>
<label class="registration-spacing">
<input id="username-registration" type="text" name="username-registration" placeholder="Username" size="35">
</label>
<label class="registration-spacing">
<input id="password-registration" type="password" name="password-registration" placeholder="Password" size="35">
</label>
<label class="registration-spacing">
<button type="button" id="submit-registration" onclick="registrationValidation()">Submit</button>
</label>
</form>
function registrationValidation() {
var fName = document.forms["vaidation"].first-name-registration.value;
var lName = document.forms["validation"].last-name-registration.value;
var dob = document.forms["validation"].date-of-birth-registration.value;
var email = document.forms["validation"].email-registration.value;
var username = document.forms["validation"].username-registration.value;
var password = document.forms["validation"].password-registration.value;
if(fName == "" || lName == "" || dob == "" || email == "" || username == "" || password == "") {
alert("Please fill out all required fields.");
return false;
} else {
window.location = "file:///E:/Program Files/eclipse/Workspace/Overrated/WEB-INF/homepage.html";
alert("Registration Successful!");
}
}
I recommend using this plugin. http://jqueryvalidation.org/ I also recommend you use jQuery.
It is super easy to use and I use it all the time for forms.
This below code works fine.
however you are not validating that the email is valid, that the DOB is valid, that the name is valid (no numbers..ect.) I can register by putting random stuff in each text box.
You can get closer by using the HTML5 built in validators.
Ex <input type="email" name="email" required placeholder="Enter a valid email address"> Notice the required attribute. Also the type attribute will force it to be a properly formatted email as well.
Here is a link to the first search result on HTML 5 form validation:
http://www.the-art-of-web.com/html/html5-form-validation/
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<form name="registration" id="registration">
<label class="registration-spacing">
<input id="first-name-registration" type="text" name="first-name-registration" placeholder="First Name" size="35">
</label>
<label class="registration-spacing">
<input id="last-name-registration" type="text" name="last-name-registration" placeholder="Last Name" size="35">
</label>
<label class="registration-spacing">
<input id="date-of-birth-registration" type="text" name="date-of-birth-registration" placeholder="Date of Birth" size="35">
</label>
<label class="registration-spacing">
<input id="email-registration" type="text" name="email-registration" placeholder="Email" size="35">
</label>
<label class="registration-spacing">
<input id="username-registration" type="text" name="username-registration" placeholder="Username" size="35">
</label>
<label class="registration-spacing">
<input id="password-registration" type="password" name="password-registration" placeholder="Password" size="35">
</label>
<label class="registration-spacing">
<button type="button" id="submit-registration" onclick="registrationValidation()">Submit</button>
</label>
</form>
<script>
function registrationValidation() {
var fName = $("#first-name-registration").val();
var lName = $("#last-name-registration").val();
var dob = $("#date-of-birth-registration").val();
var email = $("#email-registration").val();
var username = $("#username-registration").val();
var password = $("#password-registration").val();
if(fName == "" || lName == "" || dob == "" || email == "" || username == "" || password == "") {
alert("Please fill out all required fields.");
return false;
} else {
window.location = "file:///E:/Program Files/eclipse/Workspace/Overrated/WEB-INF/homepage.html";
alert("Registration Successful!");
}
}
</script>
Due to JavaScript having issues with dashes, put the id of the element in quotes inside brackets. Also the form id is registration not validation.
function registrationValidation() {
var fName = document.forms["registration"]["first-name-registration"].value;
var lName = document.forms["registration"]["last-name-registration"].value;
var dob = document.forms["registration"]["date-of-birth-registration"].value;
var email = document.forms["registration"]["email-registration"].value;
var username = document.forms["registration"]["username-registration"].value;
var password = document.forms["registration"]["password-registration"].value;
if(fName == "" || lName == "" || dob == "" || email == "" || username == "" || password == "") {
alert("Please fill out all required fields.");
return false;
} else {
window.location = "file:///E:/Program Files/eclipse/Workspace/Overrated/WEB-INF/homepage.html";
alert("Registration Successful!");
}
}
<form name="registration" id="registration">
<label class="registration-spacing">
</label>
<input id="first-name-registration" type="text" name="first-name-registration" placeholder="First Name" size="35">
<label class="registration-spacing">
<input id="last-name-registration" type="text" name="last-name-registration" placeholder="Last Name" size="35">
</label>
<label class="registration-spacing">
<input id="date-of-birth-registration" type="text" name="date-of-birth-registration" placeholder="Date of Birth" size="35">
</label>
<label class="registration-spacing">
<input id="email-registration" type="text" name="email-registration" placeholder="Email" size="35">
</label>
<label class="registration-spacing">
<input id="username-registration" type="text" name="username-registration" placeholder="Username" size="35">
</label>
<label class="registration-spacing">
<input id="password-registration" type="password" name="password-registration" placeholder="Password" size="35">
</label>
<label class="registration-spacing">
<button type="button" id="submit-registration" onclick="registrationValidation()">Submit</button>
</label>
</form>
Try using this to get the input values:
var fName = document.getElementById('first-name-registration').value;

focus on empty field when submit button is clicked in form

here is my html code
<section class="main">
<form class="form-2" name="form1" id="form1" method="POST" onsubmit="check()">
<input type="text" id="name" name="name" placeholder="Your Name" >
<input type="text" id="username" name="username" placeholder="Username" >
<input type="text" id="mail" name="mail" placeholder="E-mail id" >
<input type="text" id="phone" name="phone" placeholder="Mobile Number" >
<input type="password" id="pass1" name="pass1" placeholder="Password" >
<input type="password" id="pass2" name="pass2" placeholder="Re-type Password" >
<button type="submit" name="submit" ></button>
</form>
</section>
my javascript :
function check () {
var name = document.getElementById('name').value;
var mail = document.getElementById('mail').value;
var numb = document.getElementById('phone').value;
var pass1 = document.getElementById('pass1').value;
var pass2 = document.getElementById('pass2').value;
if((name == "") && (mail == "") && (numb == "") && (pass1 == "") && (pass2 == ""))
{
alert("Make sure that you've entered all the details :(");
document.getElementById('name').focus();
}
else
{
document.getElementById("form1").action = "register_2step_1.php";
}
Am trying this - When the submit button is clicked it checks for empty fields. If empty fields are available it must focus the name textbox.
The above code actualy focuses the field but the page is immediately getting loaded and the values are getting reset. I don't want the page to load. Thanks in advance !
Return false from the check method
if((name == "") && (mail == "") && (numb == "") && (pass1 == "") && (pass2 == ""))
{
alert("Make sure that you've entered all the details :(");
document.getElementById('name').focus();
return false;
}
else
{
document.getElementById("form1").action = "register_2step_1.php";
return true;
}
Update :
<form onsubmit="return check()">
Add in HTML
<form class="form-2" name="form1" id="form1" method="POST" onsubmit="DoSubmit();">
<input type="hidden" name="message" value="0" />
<input type="text" name="message" value="" />
<input type="hidden" name="submit" value="0" />
<input type="submit" name="submit" value="" />
<input type="hidden" name="name" value="0" />
<input type="text" id="name" name="name" value=""placeholder="Your Name" >
<input type="hidden" name="username" value="0" />
<input type="text" id="username" name="username" value=""placeholder="Username" >
<input type="hidden" name="mail" value="0" />
<input type="text" id="mail" name="mail"value="" placeholder="E-mail id" >
<input type="hidden" name="phone" value="0" />
<input type="text" id="phone" name="phone"value="" placeholder="Mobile Number" >
<input type="hidden" name="pass1" value="0" />
<input type="password" id="pass1" name="pass1"value="" placeholder="Password" >
<input type="hidden" name="pass2" value="0" />
<input type="password" id="pass2" name="pass2"value="" placeholder="Re-type Password" >
</form>
Then in JS
function DoSubmit(){
if((name == "") && (mail == "") && (numb == "") && (pass1 == "") && (pass2 == ""))
{
alert("Make sure that you've entered all the details :(");
document.getElementById('name').focus();
return false;
}
else
{
document.getElementById("form1").action = "register_2step_1.php";
document.form1.message.value = '1';
document.form1.submit.value = '1';
document.form1.name.value = '1';
document.form1.username.value = '1';
document.form1.mail.value = '1';
document.form1.phone.value = '1';
document.form1.pass1.value = '1';
document.form1.pass2.value = '1';
return true;
}
}
Change onsubmit="check()" to onsubmit("check();return false")

e.preventDefault(); not stopping form submission

I'm working on a simple form validation script, that just checks fields aren't empty to begin with (further advanced validation will be added later).
However, on submission, the form seems to continue to submit, even though I am using preventDefault(). Could someone check my syntax and my logic for me please, figure out what's going wrong? I get a flash of the validation before the form submits as normal.
Fiddle: http://jsfiddle.net/qb9KS/1/
HTML
<form id="userForm" method="POST" action="form-process.php">
<div>
<fieldset>
<legend>User Information</legend>
<div id="errorDiv"></div>
<label for="name">Name:*</label>
<input type="text" id="name" name="name" />
<span class="errorFeedback errorSpan" id="nameError">Name is required</span>
<br />
<label for="city">City:</label>
<input type="text" id="city" name="city" />
<br />
<label for="state">State:</label>
<select id="state" name="state">
<option></option>
<option>Alabama</option>
<option>California</option>
<option>Colorado</option>
<option>Florida</option>
<option>Illinois</option>
<option>New Jersey</option>
<option>New York</option>
<option>Wisconsin</option>
</select>
<br />
<label for="zip">ZIP:</label>
<input type="text" id="zip" name="zip" />
<br />
<label foe="email">Email Address:*</label>
<input type="text" id="email" name="email" />
<span class="errorFeedback errorSpan" id="emailError">Email is required</span>
<br />
<label for="phone">Telephone Number:</label>
<input type="text" id="phone" name="phone" />
<span class="errorFeedback errorSpan" id="phoneError">Format: xxx-xxx-xxxx</span>
<br />
<label for="work">Number Type:</label>
<input class="radioButton" type="radio" name="phoneType" id="work" value="work" />
<label class="radioButton" for="work">Work</label>
<input class="radioButton" type="radio" name="phoneType" id="home" value="home" />
<label class="radioButton" for="home">Home</label>
<span class="errorFeedback errorSpan" id="phonetypeError">Please choose an option</span>
<br />
<label for="password1">Password:*</label>
<input type="password" id="password1" name="password1" />
<span class="errorFeedback errorSpan" id="password1Error">Password required</span>
<br />
<label for="password2">Verify Password:*</label>
<input type="password" id="password2" name="password2" />
<span class="errorFeedback errorSpan" id="password2Error">Passwords don't match</span>
<br />
<input type="submit" id="submit" name="submit">
</fieldset>
</div>
</form>
Javascript
$(document).ready(function() {
$("#userForm").submit(function(e) {
removeFeedback();
var errors = validateForm();
if (errors == "") {
return true;
}
else {
provideFeedback(errors);
e.preventDefault();
return false;
}
});
function validateForm() {
var errorFields = new Array();
if ($('#name').val() == "") {
errorFields.push('name');
}
if ($('#email').val() == "") {
errorFields.push('email');
}
if ($('#password1').val() == "") {
errorFields.push('password1');
}
return errorFields;
}
function provideFeedback(incomingErrors) {
for (var i = 0; i < incomingErrors.length; i++) {
$("#" + incomingErrors[i]).addClass("errorClass");
$("#" + incomingErrors[i] + "Error").removeclass("errorFeedback");
}
$("#errorDiv").html("Errors encountered");
}
function removeFeedback() {
$("#errorDiv").html("");
$('input').each(function() {
$(this).removeClass("errorClass");
});
$('.errorSpan').each(function() {
$(this).addClass("errorFeedback");
});
}
});
It should be...
$("#" + incomingErrors[i] + "Error").removeClass("errorFeedback");
... instead. As jQuery object doesn't have removeclass method (and case does matter in JS), this function fails with an error, and neither e.preventDefault() nor return false lines are invoked.
The bottom line: always check JS console for errors, it'll save you A LOT of time and nerves. )
Try checking the array.length instead of =
$(document).ready(function() {
$("#userForm").submit(function(e) {
if (errors.length >0) {
return true;
}
}
}
you also typo error in removeClass
$("#" + incomingErrors[i] + "Error").removeClass("errorFeedback");

function() isn't reacting on form submit

to bring it to the point: my function isn't telling me anything when i submit the form. The url changes, but it seems like the function isnt fired. Please help!
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label>
<label for="phone" id="phone_label">Return Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">This field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<script>
$(function() {
$('.error').hide();
$(".button").click(function() {
// validate and process form here
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
});
});
</script>
Thanks in advance!
PS: Searched it already on google but didn't found a good result.
Use it:
$('form[name="contact"]').on('submit', function() {
$('.error').hide();
var name = $("input#name").val();
if (name.length == 0) {
$("label#name_error").show();
$("input#name").focus();
return false;
}
var email = $("input#email").val();
if (email.length == 0) {
$("label#email_error").show();
$("input#email").focus();
return false;
}
var phone = $("input#phone").val();
if (phone.length == 0) {
$("label#phone_error").show();
$("input#phone").focus();
return false;
}
return true;
});
First, add the event parameter to the button click handler, like this:
$(".button").click(function(e)){
Then also change
return false;
To
e.preventDefault();
EDIT:
This code works for me. When you click the button with fields empty, form is not submitted and it shows the error text next to the first field. By the way, there is no php involved here, just html and jquery. Are you loading jquery in your page?
<div id="contact_form">
<form name="contact" action="">
<fieldset>
<label for="name" id="name_label">Name</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>
<label for="email" id="email_label">Return Email</label>
<input type="text" name="email" id="email" size="30" value="" class="text-input" />
<label class="error" for="email" id="email_error">This field is required.</label>
<label for="phone" id="phone_label">Return Phone</label>
<input type="text" name="phone" id="phone" size="30" value="" class="text-input" />
<label class="error" for="phone" id="phone_error">This field is required.</label>
<br />
<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form>
</div>
<script>
$(function() {
$('.error').hide();
$(".button").click(function(e) {
// validate and process form here
$('.error').hide();
var name = $("input#name").val();
if (name == "") {
$("label#name_error").show();
$("input#name").focus();
e.preventDefault();
return;
}
var email = $("input#email").val();
if (email == "") {
$("label#email_error").show();
$("input#email").focus();
e.preventDefault();
return;
}
var phone = $("input#phone").val();
if (phone == "") {
$("label#phone_error").show();
$("input#phone").focus();
e.preventDefault();
return;
}
});
});
</script>

Categories

Resources