// Staff name validation:
function staffValidation () {
var valid = true;
var staff_name = document.getElementById("staff_name").value;
var validname = /^[a-zA-Z\s]*$/;
error1 = document.getElementById("errorMsg1").innerHTML ="*";
if (staff_name == "" ) {
document.getElementById("errorMsg1").innerHTML = "*STaff name is required";
valid = false;
}
else if (full_name.match(validname)) {
valid= true;
}
else {
document.getElementById("errorMsg1").innerHTML = "* Only letters and white spaces allowed";
valid= false;
}
return valid;
}
//email validation:
function emailValidation () {
var valid = true;
var validEmail = /^(([^<>()\[\]\\.,;:\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,}))$/;
var email = document.getElementById("email1").value;
error2 = document.getElementById("errorMsg2").innerHTML ="*";
if (email == "" ) {
document.getElementById("errorMsg2").innerHTML = "*Email is required";
valid = false;
}
else if (email.match(validEmail)) {
valid = true;
}
else {
document.getElementById("errorMsg2").innerHTML = "*Please enter a valid email.";
valid =false ;
}
return valid;
}
// Subject validation:
function subjectValidation () {
var valid = true;
var subject = document.getElementById("subject1").value;
var validname = /^[a-zA-Z\s]*$/;
error3 = document.getElementById("errorMsg3").innerHTML ="*";
if (staff_name == "" ) {
document.getElementById("errorMsg3").innerHTML = "*Subject is required";
valid = false;
}
else if (subject.match(validname)) {
valid= true;
}
else {
document.getElementById("errorMsg3").innerHTML = "* Only letters and white spaces allowed";
valid= false;
}
return valid;
}
// Problem type validation:
function problemValidation () {
var valid = true;
var prob = document.getElementsByName("problem_type")[0].value;
error4 = document.getElementById("errorMsg4").innerHTML ="*";
if (prob == "") {
document.getElementById("errorMsg4").innerHTML = "*Please select a problem type.";
valid = false;
}
else {
valid = true;
}
return valid;
}
// Description validation:
function descriptionValidation () {
var valid = true;
var description = document.getElementById("description1").value;
error5 = document.getElementById("errorMsg5").innerHTML ="*";
if (description == "" ) {
document.getElementById("errorMsg5").innerHTML = "*Description is required";
valid = false;
}
else if (description.length < 100) {
document.getElementById("errorMsg5").innerHTML = "*Please be more specific, type 100 characters minimum.";
valid = false;
}
return valid;
}
// function for form submission:
function formSubmit () {
if ( staffValidation() == false || emailValidation() == false || subjectValidation() == false || problemValidation() == false || descriptionValidation() == false ) {
document.getElementById("errorMsg").innerHTML = "* Please complete the required fields correctly";
return false;
}
else {
return true;
}
}
<!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="log-it-reports2.css">
<script src="log-it-reports.js"></script>
<title>WearView Academy Homepage</title>
</head>
<body>
<div class= "content">
<div class="inner-body">
<div class="form1">
<form method="GET" onsubmit=" return formSubmit() " action="#">
<div class="error1" id= "errorMsg"></div>
<div class="error" id= "errorMsg1"></div>
<div>
<label for="staff_name"><b>Staff Name:</b></label>
<input class="field" name="staff_name" onclick=" return staffValidation()" onchange=" return staffValidation()" id="subject" type="text" placeholder="Staff Name" >
</div><br>
<div class="error" id= "errorMsg2"></div>
<div>
<label for="email"><b>Email:</b></label>
<input class="field" id="email1" name="email" onclick=" return emailValidation()" onchange=" return emailValidation()" type="email" placeholder="staff#wearview.com">
</div><br>
<div class="error" id= "errorMsg3"></div>
<div>
<label for="subject"><b>Subject:</b></label>
<input class="field" name="subject" id="subject" onclick=" return subjectValidation()" onchange=" return subjectValidation()" type="text" placeholder="Subject Title" >
</div><br>
<div class="error" id= "errorMsg4"></div>
<div>
<select onclick=" return problemValidation()" onchange=" return problemValidation()" class="field4" name="problem_type" id="problemtypes">
<option value="">Problem Type</option>
<option value="Hardware">Hardware</option>
<option value="Software">Software</option>
<option value="Software&Hardware">Software & Hardware</option>
<option value="Other">Other</option>
</select>
</div><br>
<div class="error" id= "errorMsg5"></div>
<div>
<textarea class="field2" id="description1" name="description" onclick=" return descriptionValidation()" onchange=" return descriptionValidation()" placeholder="Description goes here" name="descript" rows="15" cols="90"></textarea>
</div>
<div>
<button class="field3" type="submit" class="btn">Submit</button>
<input type="checkbox" id="notify" name="notify" value="">
<label for="notify">Inform me by email when issue is resolved.</label>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Im trying to validate a form using javascript code, however the form action automatically takes place without any validation happening. i would like to know why my javascript code is not being called which i sourced in the head tag with the name "log-it-issues.js", could it be a syntax error ? i tried to scan my code for such an error , but no result, thank you for taking time to look at my code.
The input stuff id isn't set
Give that input an id and the form will work correctly : staff_name
<input class="field" name="staff_name" id="staff_name" onclick=" return staffValidation()" onchange=" return staffValidation()" id="subject" type="text" placeholder="Staff Name">
So I am writing some javascript to check if a user inputs a gmail address.
At the moment I have the code thats below, but no matter what I do it is giving me false. even when the input has #gmail.com...I feel that the mistake is how I am grabbing the user input in a variable and then testing it with test().
Javascript:
<script>
function validationCheck() {
var email = document.getElementById("inputEmail");
var gmailPatt = /#gmail.com/i;
var emailMatch = gmailPatt.test(email);
if (emailMatch == false || emailMatch == true) {
document.getElementById("emailError").innerHTML =
"<p>" + emailMatch + "</p>";
} else {
}
}
</script>
html
<form>
<div class="form-group row">
<div>
<label for="inputEmail" class="col-sm-1">Email:</label>
<input
type="text"
class="form-control col-sm-1"
id="inputEmail"
placeholder="username#gmail.com"
/>
<p id="emailError"></p>
</div>
</div>
<button type="button" onclick="validationCheck()">Check</button>
</form>
You need to check the value of the input, var emailMatch = gmailPatt.test(email.value);
function validationCheck() {
var email = document.getElementById("inputEmail");
var gmailPatt = /#gmail.com/i;
var emailMatch = gmailPatt.test(email.value);
if (emailMatch == false || emailMatch == true) {
document.getElementById("emailError").innerHTML =
"<p>" + emailMatch + "</p>";
} else {}
}
<form>
<div class="form-group row">
<div>
<label for="inputEmail" class="col-sm-1">Email:</label>
<input type="text" class="form-control col-sm-1" id="inputEmail" placeholder="username#gmail.com" />
<p id="emailError"></p>
</div>
</div>
<button type="button" onclick="validationCheck()">Check</button>
</form>
I am currently learning Javascript and am having some issue with the following script. Seems like I have not declared the functions. Any help will be appreciated. Thanks.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Chapter 7: Example 4</title>
<script type="text/javascript">
function btnCheckForm_onclick() {
var myForm = document.form1;
if (myForm.txtAge.value == "" || myForm.txtName.value == "") {
alert("please complete the form");
if (myForm.txtName.value == "") {
myForm.txtName.focus();
} else {
myForm.txtAge.focus():
} else {
alert("Thanks for completing the form");
}
}
function txtAge_onblur() {
var txtAge = document.form1.txtAge;
if (isNaN(txtAge.value) == true) {
alert("please enter a valid age");
txtAge.focus();
txtAge.select();
}
}
function txtName_onchange() {
window.status = "Hi " + document.form1.txtName.value;
}
</script>
<body>
<form action="" name="form1">
Please enter the following details:
<p>
Name:
<br />
<input type="text" name="txtName" onchange="txtName_onchange()" />
</p>
<p>
Age:
<br />
<input type="text" name="txtAge" onblur="txtAge_onblur()" size="3" maxlength="3" />
</p>
<p>
<input type="button" value="Check Details" name="btCheckForm" onclick="btnCheckForm_onclick()">
</form>
</body>
</html>
You have some syntax errors
function btnCheckForm_onclick() {
var myForm = document.form1;
if (myForm.txtAge.value == "" || myForm.txtName.value == "") {
alert("please complete the form");
if (myForm.txtName.value == "") {
myForm.txtName.focus();
} else {
myForm.txtAge.focus();
} }
else {
alert("Thanks for completing the form");
}
}
function txtAge_onblur() {
var txtAge = document.form1.txtAge;
if (isNaN(txtAge.value) == true) {
alert("please enter a valid age");
txtAge.focus();
txtAge.select();
}
}
function txtName_onchange() {
window.status = "Hi " + document.form1.txtName.value;
}
<form action="" name="form1">
Please enter the following details:
<p>
Name:
<br />
<input type="text" name="txtName" onchange="txtName_onchange()" />
</p>
<p>
Age:
<br />
<input type="text" name="txtAge" onblur="txtAge_onblur()" size="3" maxlength="3" />
</p>
<p>
<input type="button" value="Check Details" name="btCheckForm" onclick="btnCheckForm_onclick()">
</form>
Here is my code :
when after i entered name and email the form validation isn't performing.What should i do to validate the user entered data.And i would to like to move to another jsp page of name start.jsp when i click on Participate Kindly help me to get rid of this and please tell me what and why itsn't working..
<html>
<head>
<title>Aptitude Competition Online</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script language="javascript">
function isEmpty(str) {
if(str=="" )
{
return true;
} else return false;
}
function validate() {
var nam = document.form[0].name.value;
var ema = document.form[0].email.value;
if(isEmpty(nam))
{
alert(Name should be filled out");
document.form[0].name.focus;
return false;
}
else if(isEmpty(ema)
{
alert(E-mail should be filled out");
document.form[0].email.focus;
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<div id="header1">
<font id="font1">Aptitude Quiz</font>
</div>
<div id="email">
<div id="inside">
<font id="font2">Welcome to Aptitude Quiz</font><br><br><br>
<form name="form">
Name : <input type="text" name="name"><br><br>
E-mail : <input type="text" name="email"><br><br>
<input name="Participate" type="button" value="Participate" onClick="validate()"><br><br>
</form>
</div>
</div>
<div id="footer">
Contact Us : gmail#name.com
</div>
</body>
</html>
<script type="text/javascript">
function isEmpty(str)
{
if (str == "")
{
return true;
}
else
{
return false;
}
}
function validate()
{
var nam = document.form.name.value
var ema = document.form.email.value;
if (isEmpty(nam))
{
alert("Name should be filled out");
document.form.name.focus();
return false;
}
else if (isEmpty(ema))
{
alert("E-mail should be filled out");
document.form.email.focus();
return false;
}
else
{
return true;
}
}
</script>
Change only the script part
Change as per this
<form name="form" method = "post" onsubmit = "return validate();">
Name : <input type="text" name="name"><br><br>
E-mail : <input type="text" name="email"><br><br>
<button name="Participate" value="Submit" type = "submit"><br><br>
</form>
<html>
<head>
<title>Aptitude Competition Online</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript">
function validate()
{
var nam = document.forms[0].name.value;
var ema = document.forms[0].email.value;
if(nam == "")
{
alert("Name should be filled out");
//document.forms[0].name.focus;
document.getElementById("name").focus();
return false;
}
else if(ema =="")
{
alert("E-mail should be filled out");
//document.forms[0].email.focus;
document.getElementById("email").focus();
return false;
}
else {
return true;
}
}
</script>
</head>
<body>
<div id="header1">
<font id="font1">Aptitude Quiz</font>
</div>
<div id="email">
<div id="inside">
<font id="font2">Welcome to Aptitude Quiz</font><br><br><br>
<form name="form">
Name : <input type="text" name="name" id="name"><br><br>
E-mail : <input type="text" name="email" id="email"><br><br>
<input name="Participate" type="button" value="Participate" onClick="validate()"><br><br>
</form>
</div>
</div>
<div id="footer">
Contact Us : gmail#name.com
</div>
</body>
</html>
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>
use === or == for condition checking in javascript.
if(document.getElementById('name').value === ""){
alert("enter something valid");
return false;
}
You have to use == for comparison.= is used for assigment
if(document.getElementById('name').value == ""){
alert("enter something valid");
return false;
}
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!!
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>
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...");
})
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.