CODEWITHSUNDEEP
javascriptformsvalidation
GDesigns
GDesigns

Reputation: 285

Form Validation using JavaScript?

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>

Upvotes: 4

Views: 19426

Answers (10)

Dharmendra Mandal
Dharmendra Mandal

Reputation: 1

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

function Registration() { const initialValue = { username: '', email: '', password: '', confirmPassword: '', tnc: false }; const [formValue, setFormValue] = useState(initialValue); const [formError, setFormError] = useState({}) const [isSubmit, setIsSubmit] = useState(false) // onchange handler- const handleInput = (e) => { const { name, value, type, checked } = e.target; const inputValue = (type === 'checkbox') ? checked : value; setFormValue({ ...formValue, [name]: inputValue }); } // onsubmit handler- const handleSubmit = (e) => { e.preventDefault(); setFormError(validate(formValue)); setIsSubmit(true) }

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

Upvotes: -1

kumerasansakthi
kumerasansakthi

Reputation: 9

<!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>

Upvotes: -1

kumerasansakthi
kumerasansakthi

Reputation: 9

// 
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);
};

Upvotes: 1

kumerasansakthi
kumerasansakthi

Reputation: 1

<!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>

Upvotes: 0

AdheneManx
AdheneManx

Reputation: 348

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...");
})

Upvotes: 1

Abhilash Narayan
Abhilash Narayan

Reputation: 50

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.

Upvotes: -1

Hrushi
Hrushi

Reputation: 309

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>

Upvotes: 1

cssGEEK
cssGEEK

Reputation: 1014

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

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

Upvotes: 2

Issac Johnson
Issac Johnson

Reputation: 146

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

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

Upvotes: 4

Vikrant
Vikrant

Reputation: 5036

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!!

Upvotes: 1

Related Questions