I have been working on a student registration form validation in JavaScript but it doesn't work at all. I have even tried writing all sorts of log statements for debugging but it seems the functions aren't being invoked at all(?).
It'd be helpful if you guys could let me know where I am going wrong with this.
Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function allLetter() {
var name = document.querySelector("#name").value;
var letters = /^[A-Za-z]*$/;
if (name.test(letters)) {
return true;
} else {
alert("Not a valid Name");
return false;
}
}
function rollnumber() {
var roll = document.querySelector("#roll").value;
var phoneno = /^\d{7}$/;
if (roll.test(phoneno)) {
return true;
} else {
alert("Not a valid Roll Number");
return false;
}
}
function date() {
var date = document.querySelector("#date").value;
if (!date) {
return true;
}
else {
alert("Empty Date");
return false;
}
}
function check() {
var t1 = allLetter();
var t2 = rollnumber();
var t3 = date();
console.log(t1);
console.log(t2);
console.log(t3);
if (t1 && t2 && t3) {
alert("Registration Successful");
return true;
} else {
alert("One or More Fields are incorrectly set");
return false;
}
}
</script>
</head>
<body>
<h2>STUDENT REGISTRATION FORM</h2>
<form name="form1" method="post" onsubmit="return check()">
<label for="name">Name :</label>
<input type="text" id="name"><br>
<label for="roll">Roll No :</label>
<input type="text" id="roll"><br>
<label for="date">DOB :</label>
<input type="date" id="date"><br>
<input type="submit" value="Register">
</form>
</body>
</html>
here is my solution no javascript needed just html
<h2>STUDENT REGISTRATION FORM</h2>
<form name="form1" method="post">
<label for="name">Name :</label>
<input type="text" id="name" pattern="[A-Za-z\s]+" required><br>
<label for="roll">Roll No :</label>
<input type="text" id="roll" pattern="[0-9]+" required><br>
<label for="date">DOB :</label>
<input type="date" id="date" required><br>
<input type="submit" value="Register">
</form>
You inverted the use of .test method.
You should use regex on the left, because .test is a method of regexes.
Here your code working:
function allLetter() {
var name = document.querySelector("#name").value;
var letters = /^[A-Za-z]*$/;
if (letters.test(name)) {
return true;
} else {
alert("Not a valid Name");
return false;
}
}
function rollnumber() {
var roll = document.querySelector("#roll").value;
var phoneno = /^\d{7}$/;
if (phoneno.test(roll)) {
return true;
} else {
alert("Not a valid Roll Number");
return false;
}
}
function date() {
var date = document.querySelector("#date").value;
if (!date) {
return true;
}
else {
alert("Empty Date");
return false;
}
}
function check() {
var t1 = allLetter();
var t2 = rollnumber();
var t3 = date();
console.log(t1);
console.log(t2);
console.log(t3);
if (t1 && t2 && t3) {
alert("Registration Successful");
return true;
} else {
alert("One or More Fields are incorrectly set");
return false;
}
}
Then inside the onsubmit event you can remove the return and just use the method, the method will return directly true or false
<form name="form1" method="post" onsubmit="check();">
I think you should use the .test() method, like here.
So regex first, instead of name.test(letters) you should use letters.test(name).
Related
I am developing in my final year school project. Now I faced a problem. Some of the onsubmit function in my forms are not functioning well.
The problem is:
I am validating the details filled in in the form. But although the innerHTML already pointed out the wrong by using getElementById, the form still can be submitted. How to stop the form from submitting?
The function does not return any true or false value.
I've already checked through the code. But I can't find the mistakes.
I tried to change the function validate() to window.validate = function(), it does not work well either.
I tried to change the validate function to only return false. The form is still submitting.
I tried event preventDefault but the outcomes become I cannot submit the form.
Javascript part
function check_location() {
var user_address = document.getElementById("location");
var user_address_mess = document.getElementById("addressvalidate");
var checkaddress;
if (user_address.value == "") {
//.....
return false;
} else if (user_address.value.length <= 10) {
//.....
return false;
} else {
//....
return true;
}
}
function check_stime() {
var starttime = document.getElementById("starttime");
var mess_starttime = document.getElementById("mess_starttime");
var check1;
if (starttime != null) {
if (starttime.value == "") {
//...
return false;
}
else if (starttime.value < "08:00" && starttime > "19:00") {
//...
return false;
}
else {
//...
return true;
}
}
}
function check_date() {
today = new Date();
today.setDate(today.getDate() + 14);
var eventdate = document.getElementById("date").value;
eventdate1 = new Date(eventdate);
var mess_date = document.getElementById("mess_date");
var check2;
if (document.getElementById("checkdate") != null) {
var checkdate = document.getElementById("checkdate").innerHTML;
}
if (eventdate != null) {
if (eventdate.value == "") {
//...
return false;
}
else if (eventdate1 <= today) {
//...
return false;
}
else {
//...
return true;
}
}
}
function check_etime() {
var starttime = document.getElementById("starttime");
var endtime = document.getElementById("endtime");
var mess_endtime = document.getElementById("mess_endtime");
var eventdate = document.getElementById("eventdate");
var check3;
if (endtime != null) {
if (endtime.value == "") {
// ...
return false;
}
else if (endtime.value == starttime.value || endtime.value <= starttime.value) {
// ...
return false;
}
else if (endtime.value <= starttime.value && eventdate.value <= fulldate) {
// ...
return false;
}
else if (endtime.value < "09:00" && endtime.value > "22.00pm") {
// ...
return false;
}
else {
//...
return true;
}
}
}
function validate() {
checkstime = check_stime();
checketime = check_etime();
checkdate = check_date();
checklocation = check_location();
if (checklocation == false || checkstime == false || checketime == false || checkdate == false) {
return false;
} else {
return true;
}
}
HTML Part
<div class="g-text-center--xs g-margin-b-40--xs">
<h2 class="g-font-size-30--xs g-color--black">Booking Form</h2>
</div>
<br>
<form autocomplete="off" name="form_submit" onsubmit=" return validate();" method="post" action="">
<div class="g-margin-b-30--xs">
<p><b>Package Name :</b>
<input type="text" name="pname" class="form-control s-form-v3__input g-bg-color--white-opacity-lightest" value="<?php echo $pack1['package_name']?>" style="width:200px; font-weight:bold; color:black;" disabled>
</p>
</div>
<div class="g-margin-b-30--xs">
<p><b>Package Price :</b>
<input type="text" name="pprice" class="form-control s-form-v3__input g-bg-color--white-opacity-lightest" value="RM <?php echo $pack1['package_price']?>" style="width:200px; font-weight:bold; color:black;" disabled>
</p>
</div>
<div class="g-margin-b-30--xs">
<b>Event Date :</b>
<input onfocusout="check_date()" name="date" id="date" type="date" class="form-control s-form-v3__input g-bg-color--white-opacity-lightest" style="width:400px; color:black;">
<span id="mess_date" style="color:red;font-weight:normal;"></span>
</div>
<div class="g-margin-b-30--xs">
<b>Start Time :</b>
<input onfocusout="check_stime()" name="starttime" id="starttime" type="time" class="form-control s-form-v3__input g-bg-color--white-opacity-lightest" style="width:500px;" />
<span id="mess_starttime" style="color:red;font-weight:normal;"></span>
</div>
<div class="g-margin-b-30--xs">
<b>End Time :</b>
<input onfocusout="check_etime()" name="endtime" id="endtime" type="time" class="form-control s-form-v3__input g-bg-color--white-opacity-lightest" style="width:500px;" />
<span id="mess_endtime" style="color:red;font-weight:normal;"></span>
</div>
<b>Event Location : </b>
<br>
<textarea class="form-control s-form-v2__input" name="location" id="location" style=" width:500px; font-weight:bold; text-align:left;" onfocusout="check_location()"></textarea>
<span style="color:red;font-weight:normal;" id="addressvalidate"></span>
<div class="g-text-center--xs">
<br>
<button style="margin-bottom:50px;" type="submit" id="submit" name="addtocart" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Submit</button>
<div class="clearfix"> </div>
</div>
</form>
I want to prevent the form from submitting when there is something wrong.
You can easily fix this by changing your code to this.
<form id="myForm" onsubmit="event.preventDefault(); validate();">
and change validate() javascript function to this.
function validate() {
checkstime = check_stime();
checketime = check_etime();
checkdate = check_date();
checklocation = check_location();
if (checklocation == false || checkstime == false || checketime == false || checkdate == false) {
return false;
} else {
document.getElementById("myForm").submit();
}
}
On click of the submit button add something like below
<button onclick="return validate()" style="margin-bottom:50px;" type="submit" id="submit" name = "addtocart" class = "btn btn-primary"><span class = "glyphicon glyphicon-floppy-disk"></span> Submit</button>
In the validate() function ,you if you return true it will submit,if you return false, it will not submit form,there you can show the error message
Remove everything from the form tag all the submit lines and simply give it a unique id and same goes to the button tag too something like this
<form id ="my_form" action="/action_page.php">
<button id="u_id">submit</button>
</form>
Then in java script part
var form = document.getElementById("my_form");
document.getElementById("u_id").addEventListener("click", function () {
checkstime = check_stime();
checketime = check_etime();
checkdate = check_date();
checklocation = check_location();
if (checklocation == false || checkstime == false || checketime == false || checkdate == false) {
//show error msg
} else {
form .submit();
}
});
I would like to know how to validate a form when I use the onblur handler and the onsubmit handler at the same time. I've tried to do it and it goes straight to the submit page without displaying an error message.
Because I also have radio buttons and checkboxes, how do I validate these if the user didn't click the radio button and exclude the checkbox from validation.
Thank You
function IsNotBlank(tf, tfHelp) {
var value = tf.value;
if (value == " ") {
tf.className = "invalid ";
tfHelp.innerHTML = "This field can 't be blank.";
return false;
} else {
tf.className = "valid";
tfHelp.innerHTML = "";
return true;
}
}
function CheckLetters(tf, tfHelp) {
//check empty field from previous function.
var NotEmpty = IsNotBlank(tf, tfHelp);
if (NotEmpty == false) {
return false;
}
//assign field value
var value = tf.value;
//check if there is numbers.
var regex = new RegExp(/^[A-Za-z]{5,18}$/);
var testResult = regex.test(value);
if (testResult == false) {
tf.className = "invalid";
tfHelp.innerHTML = "Use letters only and lengths must be between 5 and 18 characters.";
return false;
} else {
tf.className = "valid";
tfHelp.innerHTML = "";
return true;
}
}
function CheckPhNumber(tf, tfHelp) {
//check empty field
var NotEmpty = IsNotBlank(tf, tfHelp);
if (NotEmpty == false)
return false;
var value = tf.value;
//validate phone number.
var regex = /^\d{8,10}$/;
var testResult = regex.test(value);
//logic
if (testResult == false) {
tf.className = "invalid";
tfHelp.innerHTML = "Please enter a valid phone number.";
return false;
} else {
tf.ClassName = "valid";
tfHelp.innerHTML = "";
return true;
}
}
function CheckEmail(tf, tfHelp) {
//check empty field
NotEmpty = IsNotBlank(tf, tfHelp);
if (NotEmpty == false) {
return false;
}
var value = tf.value;
//validate email address
var regex = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var testResult = regex.test(value);
//logic
if (testResult == false) {
tf.className = "invalid";
tfHelp.innerHTML = "Please enter a valid email address.";
return false;
} else {
tf.className = "valid";
tfHelp.innerHTML = "";
return true;
}
}
function CheckPostCode(tf, tfHelp) {
//check empty field
var NotEmpty = IsNotBlank(tf, tfHelp);
if (NotEmpty == false)
return false;
var value = tf.value;
//validate postcode.
var regex = /^\d{4}$/;
var testResult = regex.test(value);
//logic
if (testResult == false) {
tf.className = "invalid";
tfHelp.innerHTML = "Please enter a 4 digit post code.";
return false;
} else {
tf.ClassName = "valid";
tfHelp.innerHTML = "";
return false;
}
}
function ValidateForm(form) {
var formCheck = true;
for (var i = 0; i < form.elements.length; i++) {
var e = form.elements[i];
//alert(form.elements[i]);
if (e.onblur) {
// alert(e.onblur());
formCheck = e.onblur() && formCheck;
}
}
return formCheck;
}
function ResetForm(form) {
//select input elements and change color back to default
var arrayInputs = document.getElementsByTagName("input");
for (var i = 0; i < arrayInputs.length; i++) {
arrayInputs[i].className = "valid";
}
//clear text on span elements
var arraySpans = document.getElementsByTagName('span ');
for (var i = 0; i < arraySpans.length; i++) {
arraySpans[i].innerHTML = "";
}
}
<form action="submit.html" onreset="ResetForm()" onsubmit="ValidateForm(this);">
<div>
<label for="fname" class="label">First Name:</label>
<input class="valid" type="text" id="txtFname" onblur="return CheckLetters(this, txtFnameHelp);" />
<span id="txtFnameHelp"></span>
</div>
<div class="one">
<label for="lname" class="label">Last Name:</label>
<input class="valid" name="lname" id="txtLname" type="text" onblur="return CheckLetters(this, txtLnameHelp);" />
<span id="txtLnameHelp"></span>
</div>
<div class="one">
<label class="label" for="phone">Phone Number:</label>
<input class="one" id="txtPhone" type="text" onblur="CheckPhNumber(this, txtPhoneHelp);"><br>
<span id="txtPhoneHelp"></span>
</div>
<div class="one">
<label for="email" class="label">Email Address:</label>
<input class="valid" id="txtEmail" type="text" onblur="CheckEmail(this, txtEmailHelp)">
<span id="txtEmailHelp"></span><br>
</div>
<div class="one">
<label class="label">Post Code:</label>
<input id="txtPostcode" type="text" onblur="CheckPostCode(this, txtPostCodeHelp);"> <br>
<span id="txtPostCodeHelp"></span>
</div>
<br>
<div>
<label>Prefered Contact Method</label><br>
</div>
<div class="one">
</--<input type="radio" name="contact" value="email">Email
</-- <input type="radio" name="contact" value="phone">Phone
</div>
<br>
<div class="one">
<label>Your Message:</label><br />
<textarea id="txtMessage" rows="8" cols="40" onblur="IsNotBlank(this, txtMessageHelp)">Your Message</textarea>
<span id="txtMessageHelp"></span>
<br><br>
</div>
</--<input class="one" type="checkbox" name="newsletter" value="subscribe">I would like to subscribe to the newsletter <br>
<div>
<input class="one" type="submit" value="Send">
<input class="one " type="Reset " value="Clear">
<br><br>
</div>
</form>
Note that these type of JavaScript code can only be debugged using Microsoft Visual Studio for some reason and would not work on using legacy text editors.
You can use below concept to perform the both action and use window.addEventListener('DOMContentLoaded'function(e) {}) to check the validation
var error_user_name = false;
function checkpw(ele, e){
var user_name = document.forms["joinform"]["user_name"].value;
if (user_name == null || user_name == "") {
text = "UserName : Required";
document.getElementById("errormsg4").innerHTML = text;
error_user_name = false;
} else {
document.getElementById("errormsg4").innerHTML = "";
error_user_name = true;
}
}
function submitall(ele, e) {
checkpw();
if(error_user_name == false) {
e.preventDefault();
} else {
console.log('form submitted');
}
}
window.addEventListener('DOMContentLoaded', function(e) { document.getElementById('user_name').addEventListener('blur', function(e) {
checkpw(this, e);
setTimeout(function() {
if (document.activeElement.id == 'join') {
document.activeElement.click();
}
}, 10);
}, false);
document.getElementById('joinform').addEventListener('submit', function(e) {
submitall(this, e);
}, false);
});
<form id="joinform" method="post" name="joinform" action="#hello">
<h2>Join</h2>
<input type="text" name="user_name" id="user_name" placeholder="User_Name"/>
<div class ="errormsg" id ="errormsg4"></div><br>
<input type="submit" name="join" id="join" value="Submit" ><br><br>
</form>
I would like to ask for help with function that merge checkboxes into one field. In question Combine checkbox values into string before submitting form I have found one but I would like it to start onsubmit with another function that checks if the form was filled correctlty.
Form:
<form id="formularz_wspolpraca" name="Zapis na poradnik" method="post" target="_top" onsubmit="return SprawdzFormularz(this) && mergeFunction(this)">
<input type="text" id="email" name="email"/>
<input type="text" id="imie" name="imie"/>
<input type="text" id="nazwisko" name="nazwisko"/>
<input type="text" maxlength="12" size="12" id="pole_1" name="pole_1"/>
<input class="checkbox_wspolpraca" type="Checkbox" name="pole_3a" value="polecajacy">
<input class="checkbox_wspolpraca" type="Checkbox" name="pole_3b" value="projektant">
<input class="checkbox_wspolpraca" type="Checkbox" name="pole_3c" value="instalator">
<input class="checkbox_wspolpraca" type="Checkbox" name="pole_3d" value="ekspert">
<input type="hidden" name="pole_3" id="pole_3">
<input id="pp" type="checkbox" name="pp" checked=""/>
<input type="submit" value="Wyślij">
</form>
Merge function:
function mergeFuntion(event) {
event.preventDefault();
var boxes = document.getElementsByClassName('checkbox_wspolpraca');
var checked = [];
for (var i = 0; boxes[i]; ++i) {
if (boxes[i].checked) {
checked.push(boxes[i].value);
}
}
var checkedStr = checked.join(' ');
document.getElementById('pole_3').value = checkedStr;
return true;
}
Check function:
function SprawdzFormularz(f) {
if (f.email.value == "") {
alert("Nie poda\u0142e\u015b/a\u015b adresu e-mail.");
return false;
}
if (((f.email.value.indexOf("#", 1)) == -1) || (f.email.value.indexOf(".", 1)) == -1) {
alert("Poda\u0142e\u015b/a\u015b b\u0142\u0119dny adres e-mail.");
return false;
}
if (f.imie.value == "") {
alert("Wype\u0142nij pole Imi\u0119. ");
return false;
}
if (f.nazwisko.value == "") {
alert("Wype\u0142nij pole Nazwisko. ");
return false;
}
if (f.pole_1.value == "") {
alert("Wype\u0142nij pole Nr telefonu. ");
return false;
}
if ((f.pole_3a.checked == false) && (f.pole_3b.checked == false) && (f.pole_3c.checked == false) && (f.pole_3d.checked == false)) {
alert("Wybierz zakres wsp\u00f3\u0142pracy");
return false;
}
if (f.pp.checked == false) {
alert("Musisz zgodzi\u0107 si\u0119 z Polityk\u0105 Prywatno\u015bci.");
return false;
}
return true;
}
Check function is working without a problem but i can't get merge one to work as well. Can someone point out what am I doing wrong with merge function? I'm quite new to javascript so that could be some rookie mistake. Thanks in advance.
In onsubmit you are running SprawdzFormularz first and it returns true if all the checks pass. This means that it will submit the form, before the merge function is run.
You need to run the merge function inside the check function before returning true so that the form does not submit before you have combined the string and set the necessary value.
function SprawdzFormularz(f) {
// ....
var boxes = document.getElementsByClassName('checkbox_wspolpraca');
var checked = [];
for (var i = 0; boxes[i]; ++i) {
if (boxes[i].checked) {
checked.push(boxes[i].value);
}
}
var checkedStr = checked.join(' ');
document.getElementById('pole_3').value = checkedStr;
return true;
}
My code follows:.
<!doctype html>
<html lang="en">
<head>
<title>Testing the textarea</title>
<style type="text/css"></style>
<script type="text/javascript" src="validation.js"></script>
</head>
<body>
<div id="wrapper">
<span id="error_box" style="display:none;"></span>
<form name="storyTeller" method="get" action="#" onSubmit="return validateForm()">
<p class="title">
<label for="title">TITLE:</label>
<input type="text" id="title" name="title" required onBlur="validateTitle(title)"/>
</p>
<textarea name="entry" id="entry" rows="10" cols="45" onBlur="validateEntry(entry)">
</textarea>
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>
Content of validation.js:
function validateTitle(title){/*validating the title*/
if (isNaN(document.getElementById('title').value)){
document.getElementById('title').style.background="#ccffcc";
document.getElementById('error_box').style.display="none";
return true;
}
else{
document.getElementById('error_box').innerHTML='Please enter a valid title';
document.getElementById('error_box').style.display="block";
document.getElementById('title').style.background="red";
return false;
}
}
function validateEntry(entry){/*validating the entry*/
var x=document.getElementById('entry').value;
x = x.trim();
if((x=="")||(x==null)){
document.getElementById('entry').style.background="red";
document.getElementById('error_box').innerHTML = 'Where is your story';
document.getElementById('error_box').style.display="block";
return false;
}
else{
document.getElementById('entry').style.background="#ccffcc";
document.getElementById('error_box').innerHTML='';
document.getELementById('error_box').style.display="none";
return true;
}
}
function validateForm(){/*validating the form*/
var error = 0;
if(!validateTitle('title')){
document.getElementById('error_box').style.display="block";
error++;
}
if(!validateEntry('entry')){
document.getElementById('error_box').style.display="block";
error++;
}
if(error > 0){
return false;
}
}
make the submit button as a normal button; and when it is clicked to call the final validation function, at the end of the function you must submit the form manually if everything is right
example :
<script>
function val(){
if(document.getElementById('tb').value != "")
document.getElementById('frm').submit();
else alert('fill the text field');
}
</script>
<form id="frm" action="#">
<input type="text" id="tb"/>
<input type="button" id="btn" value="submit" onclick="val()"/>
</form>
There is an error in your scrip in function validateEntry()
change line:
document.getELementById('error_box').style.display="none";
to line:
document.getElementById('error_box').style.display="none";
Modified your code so now it works better for both submit and blur events.
In your HTML source change both onblur attributes to onblur="validateEntry(this)" and then you can use this javascript:
function validateEntry(entry) { /*validating*/
var error_box = document.getElementById('error_box');
error_box.style.display = "none";
if (entry.name == "title") { // INPUT type="text"
if (!isNaN(entry.value)) {
error_box.innerHTML = 'Please enter a valid title';
error_box.style.display = "block";
entry.style.background = "#fee";
return false;
} else {
entry.style.background = "#ccffcc";
return true;
}
} else if (entry.name == "entry") { // TEXTAREA
var x = entry.value.trim();
if ((x == "") || (x == null)) {
error_box.innerHTML = 'Where is your story?';
error_box.style.display = "block";
entry.style.background = "#fee";
return false;
} else {
entry.style.background = "#ccffcc";
return true;
}
}
}
function validateForm() { /*validating the form*/
var form = document.forms['storyTeller'];
var error_box = document.getElementById('error_box');
var error = 0;
var error_msg = '';
if (!validateEntry(form['title'])) {
error++;
error_msg += error_box.innerHTML + '<br/>';
}
if (!validateEntry(form['entry'])) {
error++;
error_msg += error_box.innerHTML;
}
if (error > 0) {
error_box.innerHTML = error_msg;
error_box.style.display = "block";
return false;
} else {
error_box.style.display = "none";
return true;
}
}
jsfiddle
Hi there I am really stuck on this and since I am a javscript beginner this boggles my mind.
Is there someone who knows how to write the following javascript form validation?
I am sure that it is very simple, but I can not figure this one out to save my life.
Thank you for you sharing your knowledge.
I need to write WITHOUT jquery the following form validation. Whenever an error is encountered, prevent the form from being submitted. I need to use the window.onload function to assign a validation callback function. There are 4 inputs which get validated by the javascript code. Also the javascript needs to be in its own file.
Validation Rules are as follow:
INPUT: Username; Required (yes); Validation (Must be 5-10 characters long).
INPUT: Email; Required (yes); Validation (Must have an # sign, must have a period).
INPUT: Street name; Required (no); Validation (Must start with a number).
INPUT: Year of birth; Required (yes); Validation (must be numeric).
My code looks as follow:
HTML:
<!DOCTYPE html>
<html>
<head>
<script defer="defer" type="text/javascript" src="form.js"></script>
</head>
<body>
<form action="fake.php">
Username*: <input type="text" class="required" name="u"/><br/>
Email*: <input type="text" class="required" name="p"/><br/>
Street address: <input type="text" class="numeric" name="s"/><br/>
Year of birth*: <input type="text" class="required numeric" name="b"/><br/>
<input type="submit"/><br/>
</form>
</body>
</html>
JS
document.forms[0].elements[0].focus();
document.forms[0].onsubmit=function(){
for(var i = 0; i < document.forms[0].elements.length; i++){
var el = document.forms[0].elements[i];
if((el.className.indexOf("required") != -1) &&
(el.value == "")){
alert("missing required field");
el.focus();
el.style.backgroundColor="yellow";
return false;
}
if((el.className.indexOf("numeric") != -1) &&
(isNaN(el.value))){
alert(el.value + " is not a number");
el.focus();
el.style.backgroundColor="pink";
return false;
}
}
}
without changing much of your code ... updated your code for other validation like length (needs a class verifylength to validate length) and so on....
try this
HTML
<form action="fake.php">Username*:
<input type="text" class="required verifylength" name="u" />
<br/>Email*:
<input type="text" class="required email" name="p" />
<br/>Street address:
<input type="text" class="numeric" name="s" />
<br/>Year of birth*:
<input type="text" class="required numeric" name="b" />
<br/>
<input type="submit" />
<br/>
</form>
JAVASCRIPT
document.forms[0].elements[0].focus();
document.forms[0].onsubmit = function () {
for (var i = 0; i < document.forms[0].elements.length; i++) {
var el = document.forms[0].elements[i];
if ((el.className.indexOf("required") != -1) && (el.value == "")) {
alert("missing required field");
el.focus();
el.style.backgroundColor = "yellow";
return false;
} else {
if (el.className.indexOf("verifylength") != -1) {
if (el.value.length < 5 || el.value.length > 10) {
alert("'" + el.value + "' must be 5-10 charater long");
el.focus();
el.style.backgroundColor = "pink";
return false;
}
}
}
if (el.className.indexOf("email") != -1) {
var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*#([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
var emailTest = regEx.test(el.value);
if (!emailTest) {
alert("email not valid");
el.focus();
el.style.backgroundColor = "yellow";
return false;
}
};
if ((el.className.indexOf("numeric") != -1) && (isNaN(el.value))) {
alert(el.value + " is not a number");
el.focus();
el.style.backgroundColor = "pink";
return false;
}
}
}
working fiddle
something alongs the lines of...
//username 5-10 chars
var uVal = document.getElementsByTagName("u").value;
if (uVal.length < 5 || uVal.length > 10) return false;
//email needs # and .
var eVal = document.getElementsByTagName("p").value;
if !(eVal.match('/.*#.*\./g')) return false;
//street starts w/ num
var sVal = document.getElementsByTagName("s").value;
if !(sVal.match('/^[0-9]/g')) return false;
i think the regex is off + untested :)
Here is your javascript validation object in work. Hope you can make some modification according to your need.
Style
<style>
.valid {border: #0C0 solid 1px;}
.invalid {border: #F00 solid 1px;}
</style>
HTML Form
<div>
<form id="ourForm">
<label>First Name</label><input type="text" name="firstname" id="firstname" class="" /><br />
<label>Last Name</label><input type="text" name="lastname" id="lastname" class="" /><br />
<label>Username</label><input type="text" name="username" id="username" class="" /><br />
<label>Email</label><input type="text" name="email" id="email" class="" /><br />
<input type="submit" value="submit" class="" />
</form>
</div>
Call script before closing tag
<script src="form_validation_object.js"></script>
form_validation_object.js
/*
to: dom object
type: type of event
fn: function to run when the event is called
*/
function addEvent(to, type, fn) {
if (document.addEventListener) { // FF/Chrome etc and Latest version of IE9+
to.addEventListener(type, fn, false);
} else if (document.attachEvent) { //Old versions of IE. The attachEvent method has been deprecated and samples have been removed.
to.attachEvent('on' + type, fn);
} else { // IE5
to['on' + type] = fn;
}
}
// Your window load event call
addEvent(window, 'load', function() {
/* form validation object */
var Form = {
validClass: 'valid',
inValidClass: 'invalid',
fname: {
minLength: 1,
maxLength: 8,
fieldName: 'First Name'
},
lname: {
minLength: 1,
maxLength: 12,
fieldName: 'Last Name'
},
username: {
minLength: 5,
maxLength: 10,
fieldName: 'Username'
},
validateLength: function(formElm, type) {
//console.log('string = ' + formElm.value);
//console.log('string length = ' + formElm.value.length);
//console.log('max length=' + type.maxLength);
//console.log(Form.validClass);
if (formElm.value.length > type.maxLength || formElm.value.length < type.minLength) {
//console.log('invalid');
//alert(formElm.className);
if (formElm.className.indexOf(Form.inValidClass) == -1) {
if (formElm.className.indexOf(Form.validClass) != -1) {
formElm.className = formElm.className.replace(Form.validClass, Form.inValidClass);
} else {
formElm.className = Form.inValidClass;
}
}
//alert(formElm.className);
return false;
} else {
//console.log('valid');
//alert(formElm.className.indexOf(Form.validClass));
if (formElm.className.indexOf("\\b" + Form.validClass + "\\b") == -1) { // regex boundary to match whole word only http://www.regular-expressions.info/wordboundaries.html
//formElm.className += ' ' + Form.validClass;
//alert(formElm.className);
if (formElm.className.indexOf(Form.inValidClass) != -1)
formElm.className = formElm.className.replace(Form.inValidClass, Form.validClass);
else
formElm.className = Form.validClass;
}
return true;
}
},
validateEmail: function(formElm) {
var regEx = /^([0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*#([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$/;
var emailTest = regEx.test(formElm.value);
if (emailTest) {
if (formElm.className.indexOf(Form.validClass) == -1) {
formElm.className = Form.validClass;
}
return true;
} else {
formElm.className = Form.inValidClass;
return false;
}
},
getSubmit: function(formID) {
var inputs = document.getElementById(formID).getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == 'submit') {
return inputs[i];
}
}
return false;
}
}
/* call validation object */
var ourForm = document.getElementById('ourForm');
var submit_button = Form.getSubmit('ourForm');
submit_button.disabled = 'disabled';
function checkForm() {
var inputs = ourForm.getElementsByTagName('input');
if (Form.validateLength(inputs[0], Form.fname)) {
if (Form.validateLength(inputs[1], Form.lname)) {
if (Form.validateLength(inputs[2], Form.username)) {
if (Form.validateEmail(inputs[3])) {
submit_button.disabled = false;
return true;
}
}
}
}
submit_button.disabled = 'disabled';
return false;
}
checkForm();
addEvent(ourForm, 'keyup', checkForm);
addEvent(ourForm, 'submit', checkForm);
});
Working example at JSBin
http://jsbin.com/ezujog/1