Develop Reference

Javascript form validation isn't working for registration pop-up form

*** My Registration form code
function validation1() {
var password1 = document.getElementById('password1').value;
var password2 = document.getElementById('password2').value;
if (password1 == password2) {
return true;
} else {
alert("password must be same!");
return false;
}
}
<div class="container4" id="myForm1">
<form action="Home.html" id="myForm1" class="form-container1" method="post" onsubmit="return validation1();">
<?php include('errors.php'); ?>
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter Email" id="email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" id="password1" name="password1" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" id="password2" name="password2" required>
<hr>
<p>By creating an account you agree to our Terms & Privacy.</p>
<button type="submit" class="btn2">Register</button><br><br>
<button type="button" class="btn cancel" onclick="closeForm1()">Close</button>
</form>
</div>
I have a similar login pop-up for the same page. It does the validation correctly but for registration form the - "return true" value doesn't work.

I am trying to check whether the password input fiels of the two field are same or not

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>

how to submit a form using jQuery

I can't manage to submit the form after it's validated. the validation code works- the "alert()" text comes up, though the form is not submitted.
I've tried many options but none of them worked, please help.
Thank you!
HTML:
<label for="name"> Name: </label>
<input class="inputfield" type="text" name="name" required placeholder="Full name" />
<br />
<label for="phone"> Phone Number: </label>
<input class="inputfield" type="text" id="phone" name="phone" required placeholder="Phone Number" />
<br />
<!-- <label for="email"> E-mail: </label>
<input class="inputfield" type="email" id="email" name="email" required placeholder="Email adress" />
<br /> -->
<label for="message"> Message: </label>
<textarea cols="50" rows="4" class="textarea" name="message" placeholder="Message"> </textarea>
<br />
<div id="error"></div>
<input class="submitform" type="submit" name="submit" value="Send" />
</form>
</div>
jQuery:
$("#validation").submit(function(event){
var errorMessage = "";
event.preventDefault();
if (!$.isNumeric($('#phone').val()) ) {
errorMessage="Please enter a Valid Phone";
}
if (errorMessage == "") {
alert("good")
} else {
$("#error").html(errorMessage);
}
});

Your call to event.preventDefault(); is preventing the submit. Try it like this:
$("#validation").submit(function(evt){
var errorMessage = "";
if (!$.isNumeric($('#phone').val()) ) {
errorMessage="Please enter a Valid Phone";
}
if (errorMessage == "") {
alert("good")
} else {
$("#error").html(errorMessage);
evt.preventDefault();
}
});

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")

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>