javascript onsubmit is not correctly working

javascript onsubmit is not correctly working - javascript

All responses and help is greatly appreciated!
HTML:
<h1>CONTACT US</h1>
<form action="submit.html" target="_blank" method="post" onsubmit="return validate();">
<label for="name">NAME</label>
<input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
<label for="email">EMAIL</label>
<input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
<label for="email">MESSAGE</label>
<textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
<p></p>
<input type="submit" id="submit" value="SUBMIT MESSAGE">
</form>
JAVASCRIPT:
function validate() {
var username = document.getElementById("contact-name").value;
var email = document.getElementById("contact-email").value;
if (username==="" || email==="") {
alert("Please can you fill in all fields");
return false;
} else {
return true;
}
};

Are you sure you imported the file containing your Javascript into the HTML? See below:
function validate() {
var username = document.getElementById("contact-name").value;
var email = document.getElementById("contact-email").value;
if (username==="" || email==="") {
alert("Please can you fill in all fields");
return false;
} else {
return true;
}
}
<html>
<head>
</head>
<body>
<h1>CONTACT US</h1>
<form action="submit.html" target="_blank" method="post" onsubmit="return validate();">
<label for="name">NAME</label>
<input id="contact-name" name="name" placeholder="Please enter your name..." type="text">
<label for="email">EMAIL</label>
<input id="contact-email" name="email" placeholder="Please enter your contact email..." type="text">
<label for="email">MESSAGE</label>
<textarea id="contact-message" name="message" placeholder="Please enter your message.."></textarea>
<p></p>
<input type="submit" id="submit" value="SUBMIT MESSAGE">
</form>
<script src="script.js"></script>
</body>
</html>

Related

Can't get form to validate

I have to make a form that has a username and password but the password must be five or more characters. I have tried a lot of different methods but none have succeded.
Here's my javascript:
funtion validateForm(){
var password = document.getElementById('password').value;
if (password.length < 5)
alert("Password must be longer");
return false;
}
}
and my HTML:
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login</title>
<script src="js/script.js" charset="utf-8"></script>
</head>
<body>
<div id="error">
</div>
<form name="formname" action="/action_page.php" onsubmit="validateForm()" method="post">
<div>
<label for="name">Username:</label>
<input id="username" name="name" type="text" required>
</div>
<div>
<label for="password">Password:</label>
<input id="password" name="password" type="password">
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>

You need to use Event.preventDefault() to prevent the form submit on validation fail. And to do that you need to pass the event to your handler like onsubmit="validateForm(event)".
See the code snippet to understand how it works.
function validateForm(event) {
var password = document.getElementById('password').value;
if (password.length < 5) {
event.preventDefault(); // <--- ADDED
alert("Password must be longer");
return false;
}
}
<div id="error">
</div>
<form name="formname" action="/action_page.php" onsubmit="validateForm(event)" method="post">
<div>
<label for="name">Username:</label>
<input id="username" name="name" type="text" required>
</div>
<div>
<label for="password">Password:</label>
<input id="password" name="password" type="password">
<input type="submit" value="Submit">
</div>
</form>

Submit button calls the javascript function even though the fields are empty and not followed the pattern

I am new to JavaScript. I have a form in an html file that has some text fields. When someone click the submit button, a JavaScript function is called to do some work (in this case, a simple alert). It works as I wanted, when I fill the text fields and click the submit button it calls the JavaScript function and the function shows an alert. However, the problem is, when a user clicks the submit button keeping some fields empty and/or not following the pattern of an email address, it calls the JavaScript function (even though HTML 5 has shown warnings in the form). I want the JavaScript function should only be called if there are no HTML warnings, I mean no empty fields and the user must follow the email pattern. Thank you for your help.
HTML code:
<form id="myForm" method="post" role="form" class="contactForm">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
<textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message"></textarea>
<button id="submitFormData" onclick="SubmitFormData();" type="submit" class="button button-a button-big button-rouded">Send Message</button>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="alert.js"></script>
Javascript Code (alert.js):
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
alert("SHOW SOMETHING HERE");
}

you can use required attribute in the input and one more thing you can call the SubmitFormData() onsubmit form here's your modified code :
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
alert("SHOW SOMETHING HERE");
}
<form id="myForm" method="post" role="form" class="contactForm" onsubmit="SubmitFormData();">
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" required/>
<input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" required/>
<textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message" required></textarea>
<button id="submitFormData" type="submit" class="button button-a button-big button-rouded">Send Message</button>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>

You just need to add the required attribute to your fields, see

Here is the best working solution for what you want to achieve by using the
form validation JS plugin.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<style>
form label {
display: inline-block;
width: 100px;
}
form div {
margin-bottom: 10px;
}
.error {
color: red;
margin-left: 5px;
}
label.error {
display: inline;
}
</style>
<script>
$(document).ready(function() {
$('form[id="second_form"]').validate({
rules: {
name: 'required',
user_email: {
required: true,
email: true,
},
message: {
required: true,
}
},
messages: {
name: 'This field is required',
user_email: 'Enter a valid email',
message: 'This field is required'
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<h2>Example 2:</h2>
<form id="second_form" method="post" action="">
<div>
<label for="name">Name:</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" />
</div>
<div>
<label for="email">Email</label>
<input type="email" class="form-control" name="user_email" id="user_email" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" />
</div>
<div>
<label for="message">message:</label>
<textarea class="form-control" name="message" id="message" rows="5" data-rule="required" data-msg="Please write something" placeholder="Message"></textarea>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
</body>
</html>

The easiest way was to provide an HTML only solution based on a form element's required attribute since the browser will take over the validation of required elements also by their element/control type ...
<form id="myForm" method="post" role="form" class="contactForm" action="https://stackoverflow.com/">
<input
required
type="text" name="name" id="name"
class="form-control" placeholder="Your Name"
/>
<input
required
type="email" name="email" id="email"
class="form-control" placeholder="Your Email"
/>
<textarea
required
name="message" id="message"
class="form-control" rows="5" placeholder="Message"></textarea>
<button
type="submit" id="submitFormData"
class="button button-a button-big button-rouded">Send Message</button>
</form>
A generic custom validation is much more complex and labour-intensive ...
function validateControValue(elm) {
let isValid = true;
const elmType = elm.type;
if (elmType !== 'button' && elmType !== 'submit') {
const $elm = $(elm);
const isEmpty = ($elm.val().trim() === '');
if (isEmpty) {
$elm.val('');
$elm.addClass('validation-error');
} else {
$elm.removeClass('validation-error');
}
// non empty is valid, empty is invalid.
isValid = !isEmpty;
}
return isValid;
}
function handleValidFormSubmit(/* evt */) {
const isValidSubmitData = Array
.from(this.elements)
.every(validateControValue);
return isValidSubmitData;
}
function main() {
$('#myForm').on('submit', handleValidFormSubmit)
}
$(document)
.ready(main);
.validation-error {
border: 1px solid #f00;
}
<form id="myForm" method="post" role="form" class="contactForm" action="https://stackoverflow.com/">
<input
type="text" name="name" id="name"
class="form-control" placeholder="Your Name"
/>
<input
type="email" name="email" id="email"
class="form-control" placeholder="Your Email"
/>
<textarea
name="message" id="message"
class="form-control" rows="5" placeholder="Message"></textarea>
<button
type="submit" id="submitFormData"
class="button button-a button-big button-rouded">Send Message</button>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- <script src="alert.js"></script> //-->

How to allow all character types into an input

Im attempting to limit what the user can enter in each input... Everything is working as planned except the nothing() function:
I want this function to allow ALL characters to be entered into the inputs where onKeyDown="nothing();". For some reason the ones within the nothing() function follow the same layout as username (which is text and numbers only).
please help it will be much appreciated. Thanks for your time..
<?php
session_start();
?>
<html>
<head>
<title>Registration</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" onKeyDown="ValidateName();" >
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" onKeyDown="ValidateFname();">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" onKeyDown="ValidateLname();"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" onKeyDown="ValidateIGN();">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" onKeyDown="nothing()">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+" onKeyDown="nothing()">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+" onKeyDown="nothing()">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div <div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</form>
</body>
<footer>
<script>
function ValidateName() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateFname() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateLname() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function ValidateIGN() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
</script>
<script>
function nothing() {
$("input").on("input", function(){
$(this).val($(this).val().replace(/[^A-Z|a-z|^-,]/g, ''));
}) //IE
}
</script>
</footer>
</div>
</div>
</html>

Remove all onKeyDown="functionNameXXX();" from input tag.
The problem is you are registering event every time when input value changes.
I just modified your code and it worked well.
JS Code remove all html inline method and add two handlers one for username and second for other names nothing to do with password and email if you are not willing to validate them.
//for validating username
$('input[name="username"]').keyup( function (e,i) {
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) ;
//for validating fname, lname and IGN
$('.name').keyup(function (){
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
});
HTML remove onkeydown from all input and added class in fname, lname and IGN fields
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" >
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" class="name" >
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" class="name"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" class="name">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" >
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+" >
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+" >
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div <div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</form>

First of all your pattern for nothing is wrong (will throw error) ,
you said it will accept all charcter , so just remove the keyDown event no need for the nothing function ...
function ValidateName() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^0-9|A-Z|a-z]/g, ''));
}) //IE
}
function ValidateFname() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
function ValidateLname() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
function ValidateIGN() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z]/g, ''));
}) //IE
}
/*
function nothing() {
$("input").on("input", function() {
$(this).val($(this).val().replace(/[^A-Z|a-z][^-,]/g, ''));
}) //IE
}
*/
input {display:block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username" pattern="[^-,]+" onKeyDown="ValidateName();">
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" pattern="[^-,]+" name="fname" onKeyDown="ValidateFname();">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" pattern="[^-,]+" name="lname" onKeyDown="ValidateLname();"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame" onKeyDown="ValidateIGN();">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" pattern="[^-,]+" onKeyDown="nothing()">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw" pattern="[^-,]+">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw" pattern="[^-,]+">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>

Wrong parts:
You can't use this when you are using html inline event listeners.
$('input') means every input, which will bind same events to every input, causing duplication every times when you input text.
What should you do:
Try not to use inline event listeners.
This is more like an advice, but it makes your code harder to read and harder to manage. Try to bind events from JS.
Again, $('input') means literally every input in document, which will prevent you from making separate filters. You should select elements with more specific selectors, such as $("input[name='username']"). You can see various selectors from here : https://www.w3schools.com/cssref/css_selectors.asp
This will be your code :
$("input[name='username']").on('input', function(){
$(this).val( $(this).val().replace(/[^0-9A-Za-z]/g, ''));
})
$("input[name='fname']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
$("input[name='lname']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
$("input[name='ingame']").on('input', function(){
$(this).val($(this).val().replace(/[^A-Za-z]/g, ''));
})
<html>
<head>
<title>Registration</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form action="registration.php" method="post" name = "register" >
<div style="width:50%; margin:auto;">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="username"><b>Username:</b></label>
<input type="text" placeholder="Username" name="username">
<label style="width:50%" for="fname"><b>First Name:</b></label>
<input type="text" placeholder="Enter First Name" name="fname">
<label for="lname"><b>Last Name:</b></label>
<input type="text" placeholder="Ender Last Name" name="lname"><br><br>
<label for="dob"><b>Date of Birth</b></label>
<input type="date" placeholder="" name="dob"> <br><br>
<label for="ingame"><b>In Game Name:</b></label>
<input type="text" placeholder="Enter In Game Name" name="ingame">
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email">
<label for="pw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pw">
<label for="psw-repeat"><b>Confirm Password</b></label>
<input type="password" placeholder="Repeat Password" name="confpw">
<button onclick="" name="register" type="submit" class="register">Register</button>
</div>
<div style="width:50%; margin;auto;">
<p>Already have an account? Sign in (unfinished).</p>
</div>
</form>
</body>
</html>

JavaScript email validation contains specified address

I am looking for javascript validation on email form field. On submit i want to validate if email contains #specifieddomain.com then submit else error message "please use your company email"
<div id="openModal" class="modalDialog">
<div>
X
<p><form id="microsubs_form" method="post" action="/" class="" >
<input type="text" id="ms_firstName" required="true" placeholder="First Name" style="margin-bottom:20px;">
<input type="text" id="ms_lastName" required="true" style="float:right; alignment-adjust:central; clear:right" placeholder="Last Name" style="margin-bottom:20px;">
<input type="email" id="ms_email" required="true" style="float:left;" placeholder="Corporate Email address">
<input type="number" id="ms_telephoneNumber" required="true" style="float:right; alignment-adjust:central; clear:right">
</form></p>
<p></p>
</div>
</div>
thanks

1) in HTML
change input email like this :
<input type="email" pattern="\w+#specifieddomain\.com" style="float:left;" placeholder="Corporate Email address">
final code :
<html>
<head>
</head>
<body>
<div id="openModal" class="modalDialog">
<div>
X
<p><form id="microsubs_form" method="post" action="/" class="" >
<input type="text" id="ms_firstName" required="true" placeholder="First Name" style="margin-bottom:20px;">
<input type="text" id="ms_lastName" required="true" style="float:right; alignment-adjust:central; clear:right" placeholder="Last Name" style="margin-bottom:20px;">
<input type="email" pattern="\w+#specifieddomain\.com" style="float:left;" placeholder="Corporate Email address">
<input type="number" id="ms_telephoneNumber" required="true" style="float:right; alignment-adjust:central; clear:right">
<input type="submit">
</form>
<p></p>
</div>
</div>
</body>
</html>
2) in javascript
change form like this
<form id="microsubs_form" method="post" action="/" class="" onsubmit="return validEmail()" >
and use test Method,
<script>
var emil = document.getElementById("email");
var patt = /\w+#specifieddomain\.com/;
function validEmail() {
if (!patt.test(emil.value)) {
alert("please use your company email");
return false;
}
else
return true;
}
</script>
final code :
<html>
<head>
</head>
<body>
<div id="openModal" class="modalDialog">
<div>
X
<p><form id="microsubs_form" method="post" action="/" class="" onsubmit="return validEmail()" >
<input type="text" id="ms_firstName" required="true" placeholder="First Name" style="margin-bottom:20px;">
<input type="text" id="ms_lastName" required="true" style="float:right; alignment-adjust:central; clear:right" placeholder="Last Name" style="margin-bottom:20px;">
<input id="email" style="float:left;" placeholder="Corporate Email address">
<input type="number" id="ms_telephoneNumber" required="true" style="float:right; alignment-adjust:central; clear:right">
<input type="submit">
</form>
<p></p>
</div>
<script>
var emil = document.getElementById("email");
var patt = /\w+#specifieddomain\.com/;
function validEmail() {
if (!patt.test(emil.value)) {
alert("please use your company email");
return false;
}
else
return true;
}
</script>
</div>
</body>
</html>

<script type="text/javascript">
function emailvalidator(){
var email = document.getElementById('ms_email').value;
if(email.search("#yourdomain.com")!=-1){
alert("wrong email");
}else{
alert("email is valid!");
}
}
</script>
add this function in your file, then call this function on submit.

Try this..
$('#microsubs_form').on('submit',function(){
var email = $('#ms_email').val();
var atpos = email.indexOf("#");
var dotpos = email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length) {
alert("Not a valid e-mail address");
return false;
}
})

Multiple Forms in an HTML Page

I have a form which two divs that contain different 'forms' (i.e login and register forms). The login div allows registered users log in, while the register div allows new users create a new account. Now I'm trying to validate input entered into the form. I got the javascript working for the register div but it's not working for the login div. Please how to i make the javascript work for the second div? Do i have to create different forms?
UPDATE:
Here's the javascript code:
function validateForm(){
//create variables for tracking validation
var valid=true;
var msg;
//validating the lastname field
document.getElementById('lname').onkeyup=function(){
if(document.getElementById('lname').value.length==0){
document.getElementById('lnameerror').style.display='inline';
document.getElementById('lnameerror').style.color='red';
valid=false;
document.getElementById('lname').focus();
}
else{
document.getElementById('lnameerror').style.display='none';
}
}
if(document.getElementById('lname').value.length==0){
document.getElementById('lnameerror').style.display='inline';
document.getElementById('lnameerror').style.color='red';
valid=false;
document.getElementById('lname').focus();
msg='Please enter your last name';
}
else{
document.getElementById('lnameerror').style.display='none';
}
//validating the firstname field
document.getElementById('fname').onkeyup=function(){
if(document.getElementById('fname').value.length==0){
document.getElementById('fnameerror').style.display='inline';
document.getElementById('fnameerror').style.color='red';
document.getElementById('fname').focus();
}
else{
document.getElementById('fnameerror').style.display='none';
}
}
if(document.getElementById('fname').value.length==0){
document.getElementById('fnameerror').style.display='inline';
document.getElementById('fnameerror').style.color='red';
valid=false;
document.getElementById('fname').focus();
msg='Please enter your first name';
}
else{
document.getElementById('fnameerror').style.display='none';
}
//checking to see if password matches
if(document.getElementById('cpword').value!=document.getElementById('pword').value){
msg='Password does not match, please try again.';
valid=false;
}
//Display alert on error
if(valid==false){
alert(msg);
}
return valid;
}
function signin_validate(){
//VALIDATION FOR SIGN IN FORM
//validating the password field
document.getElementById('signin_pwordl').onkeyup=function(){
if(document.getElementById('signin_pword').value.length==0){
document.getElementById('signin_pworderror').style.display='inline';
document.getElementById('signin_pworderror').style.color='red';
document.getElementById('signin_pword').focus();
}
else{
document.getElementById('signin_pworderror').style.display='none';
}
}
document.getElementById('signin').onclick=function(){
if(document.getElementById('signin_pword').value.length==0){
document.getElementById('signin_pworderror').style.display='inline';
document.getElementById('signin_pworderror').style.color='red';
document.getElementById('signin_pword').focus();
}
else{
document.getElementById('signin_pworderror').style.display='none';
}
}
//validating the email field
document.getElementById('signin').onclick=function(){
if(document.getElementById('signin_email').value.length==0){
msg='Please enter your email address';
valid=false;
}
}
//Display alert on error
if(valid==false){
alert(msg);
}
}
HTML:
<form action="Accounts.php" method="post">
<div id="maincontent">
<h1>Sign In Or Register</h1>
<div id="login">
<h2>Sign In</h2>
<div>
<label for="signin_email">Email Address*: </label><input id="signin_email" type="email" placeholder="E.g you#yourdomain.com" autofocus maxlength="50" /><span style="display:none;" id="signin_emailerror" name="signin_emailerror">*Please enter your First Name</span>
</div>
<div>
<label for="signin_pword">Password*: </label><input id="signin_pword" type="password" maxlength="24" /><span style="display:none;" id="signin_pworderror" name="signin_pworderror">*Please enter your First Name</span>
</div>
<div>
<button type="submit" id="signin" name="signin" value="Sign In" onclick="return signin_validate()">Sign in</button>
</div>
</div>
<h2>OR</h2>
<div id="register">
<h2>Register</h2>
<div>
<label for="fname">First Name*: </label>
<input id="fname" name="fname" maxlength="30" type="text" /><span style="display:none;" id="fnameerror" name="fnameerror">*Please enter your First Name</span>
</div>
<div>
<label for="lname">Last Name*: </label><input id="lname" name="lname" maxlength="30" type="text" /><span style="display:none;" id="lnameerror" name="lnameerror">*Please enter your Last Name</span>
</div>
<button type="submit" id="register" name="register" value="Register" onclick="return validateForm()">Register</button>
</div>
</div>
</div>
</form>

You can use two Forms, one for login and other for register. The advantage of two Forms is with the user can press "Enter" for submit the form in both cases.
<form name="formLogin" id="formLogin" action="Login.php" method="post" onsubmit="login_validate()">
<div id="maincontent">
<h1>Sign In Or Register</h1>
<div id="login">
<h2>Sign In</h2>
<div>
<label for="signin_email">Email Address*: </label><input id="signin_email" type="email" placeholder="E.g you#yourdomain.com" autofocus maxlength="50" /><span style="display:none;" id="signin_emailerror" name="signin_emailerror">*Please enter your First Name</span>
</div>
<div>
<label for="signin_pword">Password*: </label><input id="signin_pword" type="password" maxlength="24" /><span style="display:none;" id="signin_pworderror" name="signin_pworderror">*Please enter your First Name</span>
</div>
<div>
<button type="submit" id="signin" name="signin" value="Sign In" onclick="login_validate()">Sign in</button>
</div>
</div>
</form>
<h2>OR</h2>
<form name="formRegister" id="formRegister" action="register.php" method="post" onsubmit="signin_validate()">
<div id="register">
<h2>Register</h2>
<div>
<label for="fname">First Name*: </label>
<input id="fname" name="fname" maxlength="30" type="text" /><span style="display:none;" id="fnameerror" name="fnameerror">*Please enter your First Name</span>
</div>
<div>
<label for="lname">Last Name*: </label><input id="lname" name="lname" maxlength="30" type="text" /><span style="display:none;" id="lnameerror" name="lnameerror">*Please enter your Last Name</span>
</div>
<button type="submit" id="register" name="register" value="Register" onclick="signin_validate()">Register</button>
</div>
</div>
</div>
</form>

Develop Reference

JavaScript is the programming language of the Web.

javascript onsubmit is not correctly working - javascript

Related

Can't get form to validate

Submit button calls the javascript function even though the fields are empty and not followed the pattern

How to allow all character types into an input

JavaScript email validation contains specified address

Multiple Forms in an HTML Page

Categories

Resources