Form Validation using JavaScript?

Question

I'm trying to use form validation using JavaScript, however I don't seem to get any response, not even an alert even though it's there.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <title>Example Form</title>
        <script type="text/javascript">
            function CheckForBlank() {

                if(document.getElementById('name').value="") {
                    alert("enter something valid");
                    return false;
                }
            }
        </script>
    </head>
    <body>

        <form method="post" action="2013.php" onsubmit="return CheckForBlank();">
            Name: <input type="text" name="name" id="name"/>
            Age: <input type="text" name="age" id="age"/>
            Email: <input type="text" name="email" id="email"/>
            <p><input type="submit" value="Submit" /></p>
        </form>
    </body>
</html>

Remember to also validate this server-side. Javascript validation is easy to bypass. — Tymek
– Tymek, Commented Apr 18, 2015 at 12:20

Issac Johnson · Accepted Answer · 2015-04-18 12:09:34Z

4

use === or == for condition checking in javascript.

if(document.getElementById('name').value === ""){
   alert("enter something valid");
   return false;
}

edited Apr 18, 2015 at 12:09

answered Apr 18, 2015 at 11:28

Issac Johnson

1463 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Vikrant Over a year ago

Don't understand, how people upvoted this answer! It's not correct! if you avoid return false; form posts back even if there is alert();

Issac Johnson Over a year ago

i put this code just to make him clear the problem in the condition checking. :-) and i miss the return statement. Now i have editted the answer. Thanks for your correction :-)

cssGEEK · Accepted Answer · 2015-04-18 12:44:32Z

2

You have to use == for comparison.= is used for assigment

if(document.getElementById('name').value == ""){
       alert("enter something valid");
       return false;
    }

answered Apr 18, 2015 at 12:44

cssGEEK

1,0142 gold badges17 silver badges38 bronze badges

Comments

Vikrant · Accepted Answer · 2015-04-18 11:56:42Z

Working Demo

Here Your issue is regarding if condition only! You must use == OR === in JavaScript for comparison.

Below is corrected script!

function CheckForBlank() {
        if(document.getElementById('name').value=="") {
            alert("enter something valid");
            return false;
        }
    }

If you remove Or avoid return false, form will postback Even if Validation fails! So, return false means, exiting from function after if is must, and which is missed out in another answer!!

Vasily Kabunov · Accepted Answer · 2016-06-16 10:41:00Z

You are using = that is assignment operator, use == comparison operator that's work fine

<head>
    <title>Example Form</title>
    <script type="text/javascript">
        function CheckForBlank() {

            if(document.getElementById('name').value=="") {
                alert("enter something valid");
                return false;
            }
        }
    </script>
</head>
<body>

    <form method="post" onsubmit="return CheckForBlank();">
        Name: <input type="text" name="name" id="name"/>
        Age: <input type="text" name="age" id="age"/>
        Email: <input type="text" name="email" id="email"/>
        <p><input type="submit" value="Submit" /></p>
    </form>
</body>

IfYouSeekAnthony · Accepted Answer · 2019-06-22 00:52:52Z

I can't believe I've never realised this until now, although if you attach your Javascript to the form submission event, instead of the button submit event; the normal browser verification works (ie. input[type="email], required="required", etc.).

Works in Firefox & Chrome.

// jQuery example attaching to a form with the ID form
$(document).on("submit", "#form", function(e) {
    e.preventDefault();
    console.log ("Submitted! Now serialise your form and AJAX submit here...");
})

kumerasansakthi · Accepted Answer · 2024-01-16 18:13:56Z

// 
const form = document.querySelector('#form');
const username = document.querySelector('#username');
const email = document.querySelector('#email');
const password = document.querySelector('#password');
const cpassword = document.querySelector('#cpassword');
const mobno = document.querySelector('#mobile');
const dob = document.querySelector('#dob');

form.addEventListener('submit', (e) => {
    if (!validateInputs()) {
        e.preventDefault();
    }
});

// Attach input event listeners
username.addEventListener('input', () => validateInput(username, 'Username is required'));
email.addEventListener('input', () => validateInput(email, 'Email is required', validateEmail));
password.addEventListener('input', () => validateInput(password, 'Password is required', null, 8));
cpassword.addEventListener('input', () => validateInput(cpassword, 'Confirm password is required', null, null, password));
mobno.addEventListener('input', () => validateInput(mobno, 'Mobile no is required', validateMobile));
dob.addEventListener('input', () => validateInput(dob, 'DOB is required'));

function validateInputs() {
    let success = true;

    success = validateInput(username, 'Username is required') && success;
    success = validateInput(email, 'Email is required', validateEmail) && success;
    success = validateInput(password, 'Password is required', null, 8) && success;
    success = validateInput(cpassword, 'Confirm password is required', null, null, password) && success;
    success = validateInput(mobno, 'Mobile no is required', validateMobile) && success;
    success = validateInput(dob, 'DOB is required') && success;

    return success;
}

function validateInput(element, errorMessage, validationFunction, minLength, compareTo) {
    const value = element.value.trim();
    const inputGroup = element.parentElement;
    const errorElement = inputGroup.querySelector('.error');
    let isValid = true;

    if (value === '') {
        isValid = false;
    } else if (validationFunction && !validationFunction(value)) {
        isValid = false;
    } else if (minLength && value.length < minLength) {
        isValid = false;
    } else if (compareTo && value !== compareTo.value) {
        isValid = false;
    }

    if (!isValid) {
        setError(element, errorMessage);
    } else {
        setSuccess(element);
    }

    return isValid;
}

function setError(element, message) {
    const inputGroup = element.parentElement;
    const errorElement = inputGroup.querySelector('.error');

    errorElement.innerText = message;
    inputGroup.classList.add('error');
    inputGroup.classList.remove('success');
}

function setSuccess(element) {
    const inputGroup = element.parentElement;
    const errorElement = inputGroup.querySelector('.error');

    errorElement.innerText = '';
    inputGroup.classList.add('success');
    inputGroup.classList.remove('error');
}

const validateEmail = (email) => {
    return String(email)
        .toLowerCase()
        .match(
            /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
        );
};

const validateMobile = (mobile) => {
    return mobile.length === 10 && /^\d+$/.test(mobile);
};

kumerasansakthi · Accepted Answer · 2024-01-11 17:52:58Z

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="valide.css">
    <script src="validate.js" defer></script>
    <title>Register</title>
    <style>body{
   
    background-attachment: fixed;
    margin:0;
    font-family: 'Poppins', sans-serif; 
}

#form{
    width:400px;
    margin:20vh auto 0 auto;
    background-color: whitesmoke;
    border-radius: 5px;
    padding:30px;
}

h1{
    text-align: center;
    color:#792099;
}

#form button{
    background-color: #792099;
    color:white;
    border: 1px solid #792099;
    border-radius: 5px;
    padding:10px;
    margin:20px 0px;
    cursor:pointer;
    font-size:20px;
    width:100%;
}

.input-group{
    display:flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.input-group input{
    border-radius: 5px;
    font-size:20px;
    margin-top:5px;
    padding:10px;
    border:1px solid rgb(34,193,195) ;
}

.input-group input:focus{
    outline:0;
}

.input-group .error{
    color:rgb(242, 18, 18);
    font-size:16px;
    margin-top: 5px;
}

.input-group.success input{
    border-color: #0cc477;
}

.input-group.error input{
    border-color:rgb(206, 67, 67);
}</style>
</head>
<body>
    <div class="container">
        <form action="" id="form">
            <h1>Register</h1>
            <div class="input-group">
                <label for="username">Username</label>
                <input type="text" id="username" name="username">
                <div class="error"></div>
            </div>
            <div class="input-group">
                <label for="email">Email</label>
                <input type="text" id="email" name="email" >
                <div class="error"></div>
            </div>
            <div class="input-group">
                <label for="password">Password</label>
                <input type="password" id="password" name="password">
                <div class="error"></div>
            </div>
            <div class="input-group">
                <label for="cpassword">Confirm Password</label>
                <input type="password" id="cpassword" name="cpassword">
                <div class="error"></div>
            </div>

               <div class="input-group">
                <label for="mobno">mobileno</label>
                <input type="tel" id="mobile" name="mobile">
                <div class="error"></div>
            </div>

                <div class="input-group">
                <label for="Dob">date of birth</label>
                <input type="date" id="dob" name="dob">
                <div class="error"></div>
            </div>


            <button type="submit">Register</button>
        </form>
        <script>
            const form = document.querySelector('#form')
const username = document.querySelector('#username');
const email = document.querySelector('#email');
const password = document.querySelector('#password');
const cpassword = document.querySelector('#cpassword');
const mobno = document.querySelector('#mobile');
const dob= document.querySelector('#dob');

form.addEventListener('submit',(e)=>{

    if(!validateInputs()){
        e.preventDefault();
    }
})

function validateInputs(){
    const usernameVal = username.value.trim()
    const emailVal = email.value.trim();
    const passwordVal = password.value.trim();
    const cpasswordVal = cpassword.value.trim();
       const mobileno = mobno.value.trim();
       const dobval=dob.value.trim();
    let success = true

    if(usernameVal===''){
        success=false;
        setError(username,'Username is required')
    }
    else{
        setSuccess(username)
    }

    if(emailVal===''){
        success = false;
        setError(email,'Email is required')
    }
    else if(!validateEmail(emailVal)){
        success = false;
        setError(email,'Please enter a valid email')
    }
    else{
        setSuccess(email)
    }

    if(passwordVal === ''){
        success= false;
        setError(password,'Password is required')
    }
    else if(passwordVal.length<8){
        success = false;
        setError(password,'Password must be atleast 8 characters long')
    }
    else{
        setSuccess(password)
    }

    if(cpasswordVal === ''){
        success = false;
        setError(cpassword,'Confirm password is required')
    }
    else if(cpasswordVal!==passwordVal){
        success = false;
        setError(cpassword,'Password does not match')
    }
    else{
        setSuccess(cpassword)
    }


if(mobileno==''){
       success= false;
        setError(mobno,'mobile no is required')
}
else if(mobileno.length<=10){
    success= false;
        setError(mobno,'its not a valid mob no')
}
  // else if(!validatmob(mobno)){
  //       success = false;
  //       setError(mobno,'Please enter a valid email')
  //   }
else{
    setSuccess(mobno)
}


  if(dobval==''){
       success= false;
        setError(dob,'dob is required')
}
else{
    setSuccess(dob)
}

    return success;
}




function setError(element,message){
    const inputGroup = element.parentElement;
    const errorElement = inputGroup.querySelector('.error')

    errorElement.innerText = message;
    inputGroup.classList.add('error')
    inputGroup.classList.remove('success')
}

function setSuccess(element){
    const inputGroup = element.parentElement;
    const errorElement = inputGroup.querySelector('.error')

    errorElement.innerText = '';
    inputGroup.classList.add('success')
    inputGroup.classList.remove('error')
}

const validateEmail = (email) => {
    return String(email)
      .toLowerCase()
      .match(
        /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      );
  };

  // const validatmob = (mobile) => {
  //   return Integer(mobile)
  //     .toLowerCase()
  //     .match(

  //    /^\+1 \(\d{3}\) \d{3}-\d{4}$/ );
  // };
        </script>
    </div>
</body>
</html>

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Abhilash Narayan · Accepted Answer · 2017-02-22 15:36:20Z

I have done a better way to do form validation using bootstrap. You can take a look at my codepen http://codepen.io/abhilashn/pen/bgpGRw

var g_UnFocusElementStyle = "";
var g_FocusBackColor = "#FFC";
var g_reEmail = /^[\w\.=-]+\@[\w\.-]+.[a-z]{2,4}$/;
var g_reCell = /^\d{10}$/;
var g_invalidFields = 0;

function initFormElements(sValidElems) {
	var inputElems = document.getElementsByTagName('textarea');
	for(var i = 0; i < inputElems.length; i++) {
		com_abhi.EVENTS.addEventHandler(inputElems[i], 'focus', highlightFormElement, false);
		com_abhi.EVENTS.addEventHandler(inputElems[i], 'blur', unHightlightFormElement, false);
	}
	/* Add the code for the input elements */
	inputElems = document.getElementsByTagName('input');
	for(var i = 0; i < inputElems.length; i++) {
		if(sValidElems.indexOf(inputElems[i].getAttribute('type') != -1)) {
			com_abhi.EVENTS.addEventHandler(inputElems[i], 'focus', highlightFormElement, false);
			com_abhi.EVENTS.addEventHandler(inputElems[i], 'blur', unHightlightFormElement, false);
		}
	}
	
	/* submit handler */
	
	
	com_abhi.EVENTS.addEventHandler(document.getElementById('form1'), 'submit' , validateAllfields, false);
	
	/* Add the default focus handler */
	document.getElementsByTagName('input')[0].focus();
	
	/* Add the event handlers for validation */
	com_abhi.EVENTS.addEventHandler(document.forms[0].firstName, 'blur', validateFirstName, false);
	com_abhi.EVENTS.addEventHandler(document.forms[0].email, 'blur', validateEmailAddress, false);
	com_abhi.EVENTS.addEventHandler(document.forms[0].address, 'blur', validateAddress, false);
	com_abhi.EVENTS.addEventHandler(document.forms[0].cellPhone, 'blur', validateCellPhone, false);
}

function highlightFormElement(evt) {
	var elem = com_abhi.EVENTS.getEventTarget(evt);
	if(elem != null) {
		elem.style.backgroundColor = g_FocusBackColor;
	}
}

function unHightlightFormElement(evt) {
	var elem = com_abhi.EVENTS.getEventTarget(evt);
	if(elem != null) {
		elem.style.backgroundColor = "";
	}
}

function validateAddress() {
	var formField = document.getElementById('address');
	var ok = (formField.value != null && formField.value.length != 0);
	var grpEle = document.getElementById('grpAddress');
	if(grpEle != null) {
		if(ok) {
			grpEle.className = "form-group has-success has-feedback";
			document.getElementById('addressIcon').className = "glyphicon glyphicon-ok form-control-feedback";
			document.getElementById('addressErrorMsg').innerHTML = "";
		}
		else  {
			grpEle.className = "form-group has-error has-feedback";
			document.getElementById('addressIcon').className = "glyphicon glyphicon-remove form-control-feedback";
			document.getElementById('addressErrorMsg').innerHTML = "Please enter your address";
		}
		return ok;
	}
	
}

function validateFirstName() {
	var formField = document.getElementById('firstName');
	var ok = (formField.value != null && formField.value.length != 0);
	var grpEle = document.getElementById('grpfirstName');
	if(grpEle != null) {
		if(ok) {
			grpEle.className = "form-group has-success has-feedback";
			document.getElementById('firstNameIcon').className = "glyphicon glyphicon-ok form-control-feedback";
			document.getElementById('firstNameErrorMsg').innerHTML = "";
		}
		else  {
			grpEle.className = "form-group has-error has-feedback";
			document.getElementById('firstNameIcon').className = "glyphicon glyphicon-remove form-control-feedback";
			document.getElementById('firstNameErrorMsg').innerHTML = "Please enter your first name";
		}
		return ok;
	}
}

function validateEmailAddress() {
	var formField = document.getElementById('email');
	var ok = (formField.value.length != 0 && g_reEmail.test(formField.value));
	var grpEle = document.getElementById('grpEmail');
	if(grpEle != null) {
		if(ok) {
			grpEle.className = "form-group has-success has-feedback";
			document.getElementById('EmailIcon').className = "glyphicon glyphicon-ok form-control-feedback";
			document.getElementById('emailErrorMsg').innerHTML = "";
		}
		else {
			grpEle.className = "form-group has-error has-feedback";
			document.getElementById('EmailIcon').className = "glyphicon glyphicon-remove form-control-feedback";
			document.getElementById('emailErrorMsg').innerHTML = "Please enter your valid email id";
		}
	}
	return ok;
}

function validateCellPhone() {
	var formField = document.getElementById('cellPhone');
	var ok = (formField.value.length != 0 && g_reCell.test(formField.value));
	var grpEle = document.getElementById('grpCellPhone');
	if(grpEle != null) {
		if(ok) {
			grpEle.className = "form-group has-success has-feedback";
			document.getElementById('cellPhoneIcon').className = "glyphicon glyphicon-ok form-control-feedback";
			document.getElementById('cellPhoneErrorMsg').innerHTML = "";
		}
		else {
			grpEle.className = "form-group has-error has-feedback";
			document.getElementById('cellPhoneIcon').className = "glyphicon glyphicon-remove form-control-feedback";
			document.getElementById('cellPhoneErrorMsg').innerHTML = "Please enter your valid mobile number";
		}
	}
	return ok;
}



function validateAllfields(e) {
	/* Need to do it this way to make sure all the functions execute */
	
	var bOK = validateFirstName();
	bOK &= validateEmailAddress();
	bOK &= validateCellPhone(); 
	bOK &= validateAddress(); 
	

	if(!bOK) {
		alert("The fields that are marked bold and red are required. Please supply valid\n values for these fields before sending.");
		com_abhi.EVENTS.preventDefault(e);
	}
	
	
}

com_abhi.EVENTS.addEventHandler(window, "load", function() { initFormElements("text"); }, false);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
			<div class="row">
				<h1 class="text-center">Interactive form validation using bootstrap</h1>
				<form id="form1" action="" method="post" name="form1" class="form-horizontal" role="form" style="margin:10px 0 10px 0">
					<div id="grpfirstName" class="form-group">
						<label for="firstName" class="col-sm-2 control-label"><span class="text-danger">* </span>First Name</label>
						<div class="col-sm-10">
						  <input type="text" class="form-control" id="firstName" placeholder="Enter first name">
						   <span id="firstNameIcon"  class=""></span>
						   <div id="firstNameErrorMsg" class="text-danger"></div>
						</div>
					</div>
					
					<div class="form-group">
						<label for="lastName" class="col-sm-2 control-label">Last Name</label>
						<div class="col-sm-10">
						  <input type="text" class="form-control" id="lastName" placeholder="Enter last name">
						</div>
					</div>
					
					<div id="grpEmail" class="form-group">
						<label for="lastName" class="col-sm-2 control-label"><span class="text-danger">* </span>Email </label>
						<div class="col-sm-10">
						  <input type="email" class="form-control" id="email" placeholder="Enter email">
						   <span id="EmailIcon"  class=""></span>
						     <div id="emailErrorMsg" class="text-danger"></div>
						</div>
					</div>
					
					<div id="grpCellPhone" class="form-group">
						<label for="lastName" class="col-sm-2 control-label"><span class="text-danger">* </span>Cell Phone </label>
						<div class="col-sm-10">
						  <input type="text" class="form-control" id="cellPhone" placeholder="Enter Mobile number">
						   <span id="cellPhoneIcon"  class=""></span>
						     <div id="cellPhoneErrorMsg" class="text-danger"></div>
						</div>
					</div>
					
					<div class="form-group" id="grpAddress">
						<label for="address" class="col-sm-2 control-label"><span class="text-danger">* </span>Address </label>
						<div class="col-sm-10">
							<textarea id="address" class="form-control"></textarea>
							 <span id="addressIcon"  class=""></span>
							 <div id="addressErrorMsg" class="text-danger"></div>
						</div>
					</div>
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
						  <button type="submit" class="btn btn-success">Save</button>
						</div>
					</div>
			
		</form>
			</div> <!-- End of row -->
		</div> <!-- End of container -->

Please check my codepen to better understand code.

kumerasansakthi · Accepted Answer · 2024-01-17 08:11:19Z

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form Validation on Input Click</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>

  <form id="myForm">
    <label for="username">Username:</label>
    <input type="text" id="username" required>
    <span class="error" id="usernameError"></span>

    <br>

    <label for="password">Password:</label>
    <input type="password" id="password" required>
    <span class="error" id="passwordError"></span>

    <br>

    <button type="submit">Submit</button>
  </form>

  <script>
    // Function to validate the form
    function validateUsername() {
      let username = document.getElementById('username').value;

      // Simple validation example (you can add more complex validation)
      if (username.trim() === '') {
        document.getElementById('usernameError').innerText = 'Username is required';
        return false;
      } else {
        document.getElementById('usernameError').innerText = '';
      }

      return true;
    }

    function validatePassword() {
      let password = document.getElementById('password').value;

      // Simple validation example (you can add more complex validation)
      if (password.trim() === '') {
        document.getElementById('passwordError').innerText = 'Password is required';
        return false;
      } else {
        document.getElementById('passwordError').innerText = '';
      }

      return true;
    }

    // Add event listener to the input fields to trigger validation on focus
    document.getElementById('username').addEventListener('focus', validateUsername);
    document.getElementById('password').addEventListener('focus', validatePassword);

    // Add event listener to the form to prevent submission if validation fails
    document.getElementById('myForm').addEventListener('submit', function(event) {
      if (!validateUsername() || !validatePassword()) {
        event.preventDefault();
      }
    });
  </script>

</body>
</html>

Dharmendra Mandal · Accepted Answer · 2024-03-30 16:08:43Z

import React, { useEffect, useState } from 'react'

useEffect(() => {
    if (Object.keys(formError).length === 0 && isSubmit) {
        console.log(formValue)
    }
}, [formError, isSubmit, formValue])

// validate form values
const validate = (value) => {
    const error = {}
    let emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$/;


    // username validation
    if (value.username.trim().length === 0) {
        error.username = "username cant be empty*"
    }

    // email validation
    if (!value.email) {
        error.email = "email cant be empty*"
    }
    else if (!emailRegex.test(value.email)) {
        error.email = "email is not valid*"
    }

    // password validation
    if (!value.password) {
        error.password = "Password can't be empty*";
    } else if (!passwordRegex.test(value.password)) {
        error.password = "Password must have at least 8 characters, containing at least one letter, one number, and one special character";
    }

    // confirmPassword validation
    if (!value.confirmPassword) {
        error.confirmPassword = "Confirm Password can't be empty*";
    } else if (!passwordRegex.test(value.confirmPassword)) {
        error.confirmPassword = "Confirm Password must have at least 8 characters, containing at least one letter, one number, and one special character";
    }

    else if (value.password !== value.confirmPassword) {
        error.confirmPassword = "pasword is not matching*"
    }

    // tnc validation
    if (!value.tnc) {
        error.tnc = "Please agree to terms and conditions";
    }

    return error

}
return (
    <>
        {
            (Object.keys(formError).length === 0 && isSubmit) ? <p className='text-center'>register successfully...</p> :
                <div className='container' style={{ width: '450px' }} >
                    <pre>{JSON.stringify(formValue, undefined, 2)}</pre>
                    <form className="p-3 p-md-5 border rounded-2 bg-body-tertiary" onSubmit={handleSubmit}>
                        <h3 className='text-center'><u>Registration-Form</u></h3>
                        <div className="form-floating mb-3">
                            <input type="text" name='username' value={formValue.username} className="form-control" id="userInput" placeholder="[email protected]" onChange={handleInput} />
                            <label htmlFor="userInput">Username</label>
                            <p style={{ color: 'red' }}>{formError.username}</p>
                        </div>
                        <div className="form-floating mb-3">
                            <input type="text" name='email' value={formValue.email} className="form-control" id="floatingInput" placeholder="[email protected]" onChange={handleInput} />
                            <label htmlFor="floatingInput">Email address</label>
                            <p style={{ color: 'red' }}>{formError.email}</p>
                        </div>
                        <div className="form-floating mb-3">
                            <input type="password" name='password' value={formValue.password} className="form-control" id="floatingPassword" placeholder="Password" onChange={handleInput} />
                            <label htmlFor="floatingPassword">Password</label>
                            <p style={{ color: 'red' }}>{formError.password}</p>
                        </div>
                        <div className="form-floating mb-3">
                            <input type="password" name='confirmPassword' value={formValue.confirmPassword} className="form-control" id="cPassword" placeholder="confirmPassword" onChange={handleInput} />
                            <label htmlFor="cPassword">confirmPassword</label>
                            <p style={{ color: 'red' }}>{formError.confirmPassword}</p>
                        </div>
                        <div className="checkbox mb-3">
                            <label>
                                <input type="checkbox" name="tnc" checked={formValue.tnc} onChange={handleInput} />  agree
                            </label>
                            <p style={{ color: 'red' }}>{formError.tnc}</p>
                        </div>

                        <button className="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
                        <hr className="my-4" />
                        <small className="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
                    </form>
                </div>
        }
    </>
)

}

export default Registration

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Form Validation using JavaScript?

10 Answers 10

2 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

2 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Linked

Related