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")
Related
function onSubmit() {
if (document.getElementById('password').value == '1' && document.getElementById('password2').value == '1') {
window.location.href = 'http://google.co.in';
}
else{
alert('Please check your passcode and try again');
}
}
<fieldset>
<form class="hero-form" action="#">
<div class="row-fluid">
<label>Enter your passcode</label>
<input type="password" name="password" maxlength="1" class="span7" id="password" required/>
<input type="password" name="password" maxlength="1" class="span7" id="password2" required/>
</div>
</form>
</fieldset>
<button class="btn btn-info btn-large span5" id="joe_btn" onclick="onSubmit()">Enter</button>
Is it possible to have the form auto submit after the password is entered, instead of having to press a submit button? For example, allowing the user to keep trying numbers until they get it correct.
You mean something like this? I delegate the test of input to the form
I also fixed your weird HTML structure
window.addEventListener("load", function() {
document.getElementById("heroForm").addEventListener("input", function(e) {
const val1 = document.getElementById('password').value;
const val2 = document.getElementById('password2').value;
if (val1 && val2) {
if (val1 === '1' && val2 === '1') {
window.location.href = 'http://google.co.in';
} else {
alert('Please check your passcode and try again');
}
}
})
})
<form id="heroForm" class="hero-form" action="#">
<fieldset class="row-fluid">
<label>Enter your passcode</label>
<input type="password" name="password" maxlength="1" class="span7" id="password" required/>
<input type="password" name="password" maxlength="1" class="span7" id="password2" required/>
</fieldset>
</form>
function onSubmit() {
if (document.getElementById('password').value && document.getElementById('password2').value) {
if (document.getElementById('password').value == '1' && document.getElementById('password2').value == '1') {
window.location.href = 'http://google.co.in';
} else {
alert('Please check your passcode and try again');
}
}
}
<fieldset>
<form class="hero-form" action="#">
<div class="row-fluid">
<label>Enter your passcode</label>
<input type="password" name="password" maxlength="1" class="span7" id="password" required oninput="onSubmit()" />
<input type="password" name="password" maxlength="1" class="span7" id="password2" required oninput="onSubmit()" />
</div>
</form>
</fieldset>
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>
i have tried the Jquery and Javascript as well nothing wrk. Please tell me what need to be done, If I Click on submit Button then the password of the two input fields must be compared and checked.
<div class="registration-details">
<input type="text" name="Name" maxlength="30" placeholder="Enter Your Name" required runat="server" />
<input type="email"name="Email" required placeholder="Enter Your Email Address" runat="server" />
<input type="text" name="Number" required placeholder="Enter Your Contact Number" maxlength="10" />
<input type="text" name="AddressLine1" placeholder="Address Line 1" maxlength="50" required />
<input type="text" name="AddressLine2" placeholder="Address line 2" maxlength="50" />
<input type="password" name="Password" required placeholder="Enter Password" />
<input type="password" name="ConfirmPassword" required placeholder="Confirm Password" />
<input type="submit" value="Submit" name="Submit" />
</div>
$('#form').submit(function() {
var id1 = $(#Password).text();
var id2 = $(#ConfirmPassword).text();
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
Try below code:
1.add Ids to input fields:
<input type="password" id="Password" name="Password" required placeholder="Enter Password" />
<input type="password" id="ConfirmPassword" name="ConfirmPassword" required placeholder="Confirm Password" />
2. check in jquery
$('#form').submit(function() {
var id1 = $("#Password").val(); // use .val()
var id2 = $("#ConfirmPassword").val();
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
Incorrect syntax in your code:
$('#form').submit(function() {
var id1 = $("#Password").val); //this is the right syntax
var id2 = $("#ConfirmPassword").val();//this too
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
As other users have rightly mentioned:
.text() is for elements containing text, it won't work on input elements.
.val() is to obtain input element texts.
missing form tag and
missing id in password
try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
alert("hi");
$('form').submit(function() {
var id1 = $('#Password').val();
var id2 = $('#ConfirmPassword').val();
if (id1 == id2) {
alert('Error, cant do that');
return false;
} else {
return true;
}
});
});
<div class="registration-details">
<form action="#" id="form">
<input type="text" name="Name" maxlength="30" placeholder="Enter Your Name" required runat="server" />
<input type="email"name="Email" required placeholder="Enter Your Email Address" runat="server" />
<input type="text" name="Number" required placeholder="Enter Your Contact Number" maxlength="10" />
<input type="text" name="AddressLine1" placeholder="Address Line 1" maxlength="50" required />
<input type="text" name="AddressLine2" placeholder="Address line 2" maxlength="50" />
<input type="password" id="Password" name="Password" required placeholder="Enter Password" />
<input type="password" id="ConfirmPassword" name="ConfirmPassword" required placeholder="Confirm Password" />
<input type="submit" value="Submit" name="Submit" />
</form>
</div>
$(document).ready(function(){
$("#btnsubmit").on('click', function(){
var password=$('#password').val();
var confirmpassword=$('#confirmpassword').val();
if(password == confirmpassword)
{
alert('Password and confirm password are Equal');
}
else
{
alert('Password and confirm password are not Equal');
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="registration-details">
<input type="text" name="Name" maxlength="30" placeholder="Enter Your Name" required runat="server" /><br/>
<input type="email"name="Email" required placeholder="Enter Your Email Address" runat="server" /><br/>
<input type="text" name="Number" required placeholder="Enter Your Contact Number" maxlength="10" /><br/>
<input type="text" name="AddressLine1" placeholder="Address Line 1" maxlength="50" required /><br/>
<input type="text" name="AddressLine2" placeholder="Address line 2" maxlength="50" /><br/>
<input type="password" id="password" name="Password" required placeholder="Enter Password" /><br/>
<input type="password" id="confirmpassword" name="ConfirmPassword" required placeholder="Confirm Password" /><br/>
<input type="submit" value="Submit" id="btnsubmit" name="Submit" />
</div>
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;
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>