Form validation using javascript and BootstrapDialog - javascript

I'm trying to do form validation by using javascript, however, I think there are some issues for the name field.
Whenever I enter any value for name field, it will automatically skip other validation and direct me to index.php.
Another scenario is after I filled in all except name field, it will it will automatically skip other validation and direct me to index.php.
Any help will be appreciated!
<!DOCTYPE html>
<html>
<head>
<!-- https://stackoverflow.com/questions/10585689/change-the-background-color-in-a-twitter-bootstrap-modal
http://nakupanda.github.io/bootstrap3-dialog/
-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href- "css/trying.css" >
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script>
function showError(message) {
BootstrapDialog.show({
title: 'Attention',
message: message,
type: BootstrapDialog.TYPE_DANGER,
buttons: [{
label: 'Ok',
cssClass: 'btn-default',
action: function(dialog) {
dialog.close();
}
}]
});
return false;
}
function validationFunction($msg){
var list = document.createElement('ul');
for(var i = 0; i < $msg.length; i++) {
var item = document.createElement('li');
item.appendChild(document.createTextNode($msg[i]));
list.appendChild(item);
}
showError($msg);
return false;
}
function validateForm(form) {
var RE_NAME = /^[A-Z a-z]+$/;
var RE_EMAIL = /^([a-zA-Z0-9_\-\.]+)#([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;
var RE_PASSWORD = /^[\S]{6,20}$/
var errors = [];
var name = form.reg_full_name.value;
var email = form.reg_email.value;
var password = form.reg_password.value;
var confirmPass = form.reg_confirmpass.value;
//Name Validation
if (name == "") {
errors.push("Please enter your full name");
}
else if (!RE_NAME.test(x)){
errors.push( "Please enter valid name");
}
//Email Validation
if (!RE_EMAIL.test(email)){
errors.push("Please enter a valid Email");
}
//Password Validation
if (password =="" || confirmPass =="" ){
errors.push( "Password and Comfirmation Password required");
}
else if (!RE_PASSWORD.test(password)){
errors.push("Please a enter a password 6 - 20 characters in length");
}
else if (password!= confirmPass){
errors.push("Your password and confirmation password do not match");
}
//If more than 1 error
if (errors.length > 1) {
validationFunction(errors);
alert(errors);
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action=""
onsubmit="return validateForm(this)" method="post">
Name: <input type="text" name="reg_full_name"><br><br>
Email: <input type="email" name="reg_email"><br><br>
Password: <input type="password" name="reg_password"><br><br>
Confirm Password: <input type="password" name="reg_confirmpass"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

The array "errors" doesn't get populated with the correct values.
The correct way to do this would be:
errors.push("Please enter your full name");
Then your errors array gets a new entry "Please enter your full name", which has an index of 0. The array now also has a length of 1. So you would need to adjust the block where you ask if there is more than one error to:
if (errors.length > 1)

Sorry, everyone. I've found the problem.
Is my careless mistake, I've accidentally typed the wrong variable at this line which causes my whole validation
!RE_NAME.test(x)
The problem solved.

Related

Creating a paragraph on form submit

JS newbie here. I'm making a form with validation that creates a p tag when submitted and validated. I just cant seem to get it to work, because the site reloads when no errors are displayed, instead of creating the paragraph with the inputs. Seems like I've tried every suggested solution there is, but nothing works for me. I hope someone out there might know what the issue is!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Form validation</title>
<link rel="stylesheet" href="stylesheet.css">
<script src="script.js"></script>
</head>
<body>
<form name="contactForm" onsubmit="return validateForm()">
<h2>Application Form</h2>
<div class="row">
<label>Förnamn</label>
<input type="text" name="fname">
<div class="error" id="fnameErr"></div>
</div>
<div class="row">
<label>Efternamn</label>
<input type="text" name="lname">
<div class="error" id="lnameErr"></div>
</div>
<div class="row">
<label>Email Address</label>
<input type="text" name="email">
<div class="error" id="emailErr"></div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
<div class="wrapper">
<div id="list">
</div>
</div>
</body>
</html>
JS:
// Defining a function to display error message
function printError(elemId, hintMsg) {
document.getElementById(elemId).innerHTML = hintMsg;
}
// Defining a function to validate form
function validateForm() {
// Retrieving the values of form elements
var fname = document.contactForm.fname.value;
var lname = document.contactForm.lname.value;
var email = document.contactForm.email.value;
// Defining error variables with a default value
var fnameErr = lnameErr = emailErr = true;
// Validate name
if(fname == "") {
printError("fnameErr", "Please enter your name");
} else {
var regex = /^[a-zA-Z\s]+$/;
if(regex.test(fname) === false) {
printError("fnameErr", "Please enter a valid name");
} else {
printError("fnameErr", "");
fnameErr = false;
}
}
if(lname == "") {
printError("lnameErr", "Please enter your name");
} else {
var regex = /^[a-zA-Z\s]+$/;
if(regex.test(lname) === false) {
printError("lnameErr", "Please enter a valid name");
} else {
printError("lnameErr", "");
lnameErr = false;
}
}
// Validate email address
if(email == "") {
printError("emailErr", "Please enter your email address");
} else {
// Regular expression for basic email validation
var regex = /^\S+#\S+\.\S+$/;
if(regex.test(email) === false) {
printError("emailErr", "Please enter a valid email address");
} else{
printError("emailErr", "");
emailErr = false;
}
}
// Prevent the form from being submitted if there are any errors
if((fnameErr || lnameErr || emailErr) == true) {
return false;
} else {
document.getElementById("add").onclick = function() {
var p = document.createElement("p");
var fname = document.getElementsByName("fname").value;
var lname = document.getElementsByName("lname").value;
var email = document.getElementsByName("email").value;
p.innerHTML = fname + "<br />" + lname + "<br />" + email;
document.getElementById("list").appendChild(p);
};
}
};
You can prevent a erroneous form from submitting with checkValidity() like this...
<button type="submit" formaction="if(this.form.checkValidity()){this.form.submit();} else {alert('Not valid!');}">Submit</button>
Replace my alert() with whatever you had in mind.

Form validation click event fires on all inpout fields prematurely. I aslo need help to to store and compare sign in to login at later point

I am having trouble with validating my form inputs on my click event. The click event fires in each of my inputs on my form which then checks for validation before all fields are filled. I need to be able to submit and check for validation at the same event. Ive tried so many things I cant list them all.
I see that my click event needs to be on my anchor tag with the submit image or all inputs will respond to click event, but the username and password will not validate when I put a onclick="return checkForm(this); in the opening anchor tag. I also tried changing my anchor tag to a button and a div. I tried using jquery to make it work and failed.
I ultimately need the password and username to be stored and code written to check for login validation as well...
I have considered many different ways and each have failed.To many to list.
Help!
Having a alert pop up each time the user switches inputs is very anoying indeed.
I am new at this so I apologize for any incorrect or unorthodox coding and posting. Corrections and advice is welcomed and all assistance is appreciated greatly.
My code follows:
<!DOCTYPE html><!--this is where I got my password info-->
<html lang="en"><!--http://www.the-art-of-web.com/javascript/validate-password/#box1-->
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery_library.js"></script>
<script type="text/javascript">
alert("Sign up please");
function checkForm(form)
{
if(form.username.value == "") {
alert("Error: Username cannot be blank!");
form.username.focus();
return false;
}
re = /^\w+$/;
if(!re.test(form.username.value)) {
alert("Error: Username must contain only letters, numbers and underscores!");
form.username.focus();
return false;
}
if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
if(form.pwd1.value.length < 6) {
alert("Error: Password must contain at least six characters!");
form.pwd1.focus();
return false;
}
if(form.pwd1.value == form.username.value) {
alert("Error: Password must be different from Username!");
form.pwd1.focus();
return false;
}
re = /[0-9]/;
if(!re.test(form.pwd1.value)) {
alert("Error: password must contain at least one number (0-9)!");
form.pwd1.focus();
return false;
}
re = /[a-z]/;
if(!re.test(form.pwd1.value)) {
alert("Error: password must contain at least one lowercase letter (a-z)!");
form.pwd1.focus();
return false;
}
re = /[A-Z]/;
if(!re.test(form.pwd1.value)) {
alert("Error: password must contain at least one uppercase letter (A-Z)!");
form.pwd1.focus();
return false;
}
} else {
alert("Error: Please check that you've entered and confirmed your password!");
form.pwd1.focus();
return false;
}
alert("You entered a valid password: " + form.pwd1.value);
return true;
}
</script>
/*clears my inputs*/
<script>
$(document).ready(function() {
$('input' ).on('click focusin', function() {
this.value = '';
});
});
</script>
/*enters my password into a variable for storage and futer login validation */
/*I amdoing the same thing for my username later...*/
<script>
$(document).ready(function() {
$('img[name="mySubmitButton"]').on('click focusin', function() {
$('input[name="passwordHolder"]').val($('input[name="pwd1"]').val());
});
});
</script>
</head>
<body>
<input style="visibility:hidden;" type="text" name="passwordHolder" value="This is your saved pasword:"/>
<h1>user sign in</h1>
<h2>You must complete and submit the form to get back to home page</h2>
<form onclick="return checkForm(this);">
<p>Username: <input type="text" name="username" value="enter your user name." autofocus="autofocus"></p>
<p>Password: <input type="password" name="pwd1"id="myPassword" ></p>
<p>Confirm Password: <input type="password" name="pwd2"></p>
<p><img src="img/submitButtonExitOverlayNewsletter.png" name="mySubmitButton" value="submit" value="Re-enter your password."/></p>
home Page
</form>
</body>
</html>
You have to use onsubmit instead of onclickand add <input type="submit" /> for onsubmit to work
If you want to style the submit button refer how-can-i-make-my-input-type-submit-an-image
For resetting of form use document.getElementById('myform').reset();
<!DOCTYPE html><!--this is where I got my password info-->
<html lang="en"><!--http://www.the-art-of-web.com/javascript/validate-password/#box1-->
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
alert("Sign up please");
function checkForm(form)
{
if(form.username.value == "") {
alert("Error: Username cannot be blank!");
form.username.focus();
return false;
}
re = /^\w+$/;
if(!re.test(form.username.value)) {
alert("Error: Username must contain only letters, numbers and underscores!");
form.username.focus();
return false;
}
if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
if(form.pwd1.value.length < 6) {
alert("Error: Password must contain at least six characters!");
form.pwd1.focus();
return false;
}
if(form.pwd1.value == form.username.value) {
alert("Error: Password must be different from Username!");
form.pwd1.focus();
return false;
}
re = /[0-9]/;
if(!re.test(form.pwd1.value)) {
alert("Error: password must contain at least one number (0-9)!");
form.pwd1.focus();
return false;
}
re = /[a-z]/;
if(!re.test(form.pwd1.value)) {
alert("Error: password must contain at least one lowercase letter (a-z)!");
form.pwd1.focus();
return false;
}
re = /[A-Z]/;
if(!re.test(form.pwd1.value)) {
alert("Error: password must contain at least one uppercase letter (A-Z)!");
form.pwd1.focus();
return false;
}
} else {
alert("Error: Please check that you've entered and confirmed your password!");
form.pwd1.focus();
return false;
}
//Use this to reset your form
// document.getElementById('myform').reset();
alert("You entered a valid password: " + form.pwd1.value);
return true;
}
</script>
/*clears my inputs*/
<script>
//You don't have to use this this will reset your values even on click and focusin
// $(document).ready(function() {
// $('input' ).on('click focusin', function() {
// this.value = '';
// });
// });
</script>
/*enters my password into a variable for storage and futer login validation */
/*I amdoing the same thing for my username later...*/
<script>
$(document).ready(function() {
$('img[name="mySubmitButton"]').on('click focusin', function() {
$('input[name="passwordHolder"]').val($('input[name="pwd1"]').val());
});
});
</script>
</head>
<body>
<input style="visibility:hidden;" type="text" name="passwordHolder" value="This is your saved pasword:"/>
<h1>user sign in</h1>
<h2>You must complete and submit the form to get back to home page</h2>
<form onsubmit="return checkForm(this);" id="myform">
<p>Username: <input type="text" name="username" value="enter your user name." autofocus="autofocus"></p>
<p>Password: <input type="password" name="pwd1"id="myPassword" ></p>
<p>Confirm Password: <input type="password" name="pwd2"></p>
<p><img src="img/submitButtonExitOverlayNewsletter.png" name="mySubmitButton" value="submit" value="Re-enter your password."/></p>
home Page
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>

Validation with JavaScript

There are similar questions, but I can't find the way I want to check the form submit data.
I like to check the form submit data for phone number and email. I check as follows, but it doesn't work.
How can I make it correct?
<script>
function validateForm() {
var x = document.forms["registerForm"]["Email"].value;
if (x == null || x == "") {
alert("Email number must be filled out.");
return false;
}
else if(!/#./.test(x)) {
alert("Email number must be in correct format.");
return false;
}
x = document.forms["registerForm"]["Phone"].value;
if (x == null || x == "" ) {
alert("Phone number must be filled out.");
return false;
}
else if(!/[0-9]+()-/.test(x)) {
alert("Phone number must be in correct format.");
return false;
}
}
</script>
For email I'd like to check only "#" and "." are included in the email address.
For phone number, I'd like to check ()-+[0-9] and one space are only accepted for phone number, for example +95 9023222, +95-1-09098098, (95) 902321. How can I check it?
There will be another check at the server, so there isn't any need to check in detail at form submit.
Email validation
From http://www.w3resource.com/javascript/form/email-validation.php
function ValidateEmail(mail)
{
if (/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value))
{
return (true)
}
alert("You have entered an invalid email address!")
return (false)
}
Phone number validation
From http://www.w3resource.com/javascript/form/phone-no-validation.php.
function phonenumber(inputtxt)
{
var phoneno = /^\d{10}$/;
if ((inputtxt.value.match(phoneno))
{
return true;
}
else
{
alert("message");
return false;
}
}
You can do something like this:
HTML part
<div class="form_box">
<div class="input_box">
<input maxlength="64" type="text" placeholder="Email*" name="email" id="email" />
<div id="email-error" class="error-box"></div>
</div>
<div class="clear"></div>
</div>
<div class="form_box">
<div class="input_box ">
<input maxlength="10" type="text" placeholder="Phone*" name="phone" id="phone" />
<div id="phone-error" class="error-box"></div>
</div>
<div class="clear"></div>
</div>
Your script
var email = $('#email').val();
var phone = $('#phone').val();
var email_re = /^(([^<>()[\]\\.,;:\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,3}))$/;
var mobile_re = /^[0-9]{10}$/g;
if ($.trim(email) == '') {
$('#email').val('');
$('#email-error').css('display', 'block');
$('#email-error').html('Please enter your Email');
} else if (!email.match(email_re)) {
$('#email-error').css('display', 'block');
$('#email-error').html('Please enter valid Email');
}
if ($.trim(phone) == '') {
$('#phone').val('');
$('#phone-error').css('display', 'block');
$('#phone-error').html('Please enter your Phone Number');
} else if (!phone.match(mobile_re)) {
$('#phone-error').css('display', 'block');
$('#phone-error').html('Please enter valid Phone Number');
} else {
$('#phone-error').css('display', 'none');
$('#phone-error').html('');
}
You could of course write the validation part yourself, but you could also use one of the many validation libraries.
One widely used one is Parsley. It's very easy to use. Just include the .js and .css and add some information to the form and its elements like this (fiddle):
<script src="jquery.js"></script>
<script src="parsley.min.js"></script>
<form data-parsley-validate>
<input data-parsley-type="email" name="email"/>
</form>
HTML5 has an email validation facility. You can check if you are using HTML5:
<form>
<input type="email" placeholder="me#example.com">
<input type="submit">
</form>
Also, for another option, you can check this example.

if jQuery statement | empty text boxes

Ok so i have been literally trying to figure this out for the past hour, its such a simple thing that i never have a problem with. So the input 'username_input' has a jQuery if state that is
if($('#username_input').val() == 0) {
alert('Empty');
} else {
alert('Not empty');
}
After that it moves onto the 'password_input' if statement which is the same thing, but it keeps alerting 'empty'. Why?
<!doctype html>
<html>
<head>
<title> Awflicks </title>
<meta name=viewport content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<div id="body_div">
<form action="" method="post">
<div id="username_div"> Username: <input type="text" name="username" id="username_input"> </div>
<div id="password_div"> Password: <input type="password" name="password" id="password_input"> </div>
<div id="retype_password_div"> Retype password: <input type="password" name="retype_password" id="retype_password_input"> </div>
<div type="submit" id="submit_button"> Create Account </div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var $username = $('#username_input').val();
var $password1 = $('#password_input').val();
var $password2 = $('#retype_password_input').val();
function create_account() {
if($username == 0) {
alert('empty');
} else {
alert('not empty')
}
}
$('#submit_button').click(function() {
create_account();
document.forms[0].submit();
})
</script>
</body>
</html>
Because the variable with the value does not get updated when the value changes. It is the value when it is read. You need to read the value when you want it or set the variable onchange.
Also not sure how the value would be zero since there is no value set. Shouldn't you be checking the length? And you are going to want to return a Boolean from your validation function so you know to cancel the form submission.
You can directly use this without defining variables
if(!$('#username_input').val()) // or if(!$('#password_input').val()) for password input
{
alert('empty');
} else {
alert('not empty')
}
You need to refactor as follows to ensure that $username will only store the value once an input has been committed (e.g. once submit has been pressed)
function create_account() {
var $username = $('#username_input').val();
var $password1 = $('#password_input').val();
var $password2 = $('#retype_password_input').val();
if($username == 0) {
alert('empty');
} else {
alert('not empty')
}
}
After you make the changes suggested by the other answers, you are going to have an issue with your form always getting submitted even when the alert shows "Empty". In fact, it will get submitted twice when the alert shows "Not empty". That is because your "submit_button" has type="submit" so it submits the form. You could change to type="button", but my preference is to bind the handler to the form's submit-event, instead of the button's click-event.
$('form').submit(function(event) {
event.preventDefault(); // Stop the form from getting submitted.
var username = $('#username_input').val();
var password1 = $('#password_input').val();
var password2 = $('#retype_password_input').val();
var isValid = true;
if (username == '') {
alert('Empty');
isValid = false;
}
if (isValid) {
this.submit(); // Now submit the form.
}
});

JavaScript-form validation

I am doing some form validation in JSP, on click on submit button "validate_access()" function is not called or not working. Sometimes this function displays a alret box and then stop doing any thing . Please tell what is wrong with this piece of code.Here is a piece of code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Data management system</title>
<script language="JavaScript" type="text/javascript">
function validate_access()
{
var a = document.forms["myForm1"]["MISDN"].value;
var b = document.forms["myForm1"]["Issue"].value;
var c = document.forms["myForm1"]["SR"].value;
var d = document.forms["myForm1"]["date"].value;
var numbers = /^[0-9]+$/;
var alpha= /^[a-zA-Z]+$/;
var Datee= /^\d{1, 2}\/\d{1, 2}\/\d{4}$/;
if(document.myform1.MISDN.value=="" && document.myform1.Issue.value=="" && document.myform1.SR.value=="" && document.myform1.date.value=="")
{
alert("Manadotry fields should not left blank");
document.myform1.MISDN.focus();
document.myform1.Issue.focus();
document.myform1.SR.focus();
document.myform1.date.focus();
return false;
}
else if(!a.value.match(numbers))
{
alert('Please input numeric characters only');
document.myform1.MISDN.focus();
return false;
}
else if(!(b.value.match(numbers) && b.value.match(alpha)))
{
alert('Please input numeric and alphabets only');
document.myform1.Issue.focus();
return false;
}
else if(!c.value.match(numbers))
{
alert('Please input numeric characters only');
document.myform1.SR.focus();
return false;
}
else if(!d.value.match(Datee))
{
alert('Please input correct date');
document.myform1.date.focus();
return false;
}
else
return true;
}
</script>
</head>
<body>
<div class="main">
<div class="header"></div>
<div class="continer">
<div class="myform1" style="height:200px; width:300px; float:left;">
<h2>1344 Access</h2>
<form name="myform1" action="access.jsp" method="get" onsubmit="return validate_access()">
<br/>MSISDN:<input type="text" name="MISDN" maxlength="11">
<br/>Issue:<input type="text" name="Issue" maxlength="13">
<br/>SR:<input type="text" name="SR">
<br/>Date:<input type="text" name="date" value="dd/mm/yy">
<br/><input type="submit" value="Submit">
<br/><input type="reset" name="Reset">
</form>
</div>
<div class="myform2" style="float:left;height:200px; width:300px;">
<h2>O.C.S</h2>
<form name="myform2" action="ocs.jsp" method="post" onsubmit="return validate_ocs()">
<br/>MSISDN:<input type="text" name="MISDN" maxlength="11">
<br/>SR:<input type="text" name="SR">
<br/>REASON:<input type="text" name="reason">
<br/><input type="submit" value="Submit">
<br/><input type="reset" name="Reset">
</form>
</div>
</div>
</div>
</body>
Problems in your javascript are:
the first if condition check is wrong you mean || in place of &&.
then next when you call match method on empty string a error probably raise like:
Uncaught TypeError: Cannot read property 'match' of undefined
you calling .focus() continuously that doesn't making any sense, call once with a condition check.
There is something wrong in this line:var a = document.forms["myForm1"]["MISDN"].value;
Look at your source code, your form name is "myform1" not "myForm1".
JavaScript is case sensitive.
http://en.wikipedia.org/wiki/JavaScript_syntax
in your js:
document.forms["myForm1"]
but in your form(html) it is:
<form name="myform1"
Try this:
function validate_access()
{
var a = document.forms["myForm1"]["MISDN"].value;
var b = document.forms["myForm1"]["Issue"].value;
var c = document.forms["myForm1"]["SR"].value;
var d = document.forms["myForm1"]["date"].value;
var numbers = /^[0-9]+$/;
var alpha= /^[a-zA-Z]+$/;
var Datee= /^\d{1, 2}\/\d{1, 2}\/\d{4}$/;
if(a == "" && b == "" && c == "" && d == "")
{ //as you have default value for d (date field), this condition will never match;
//either you can remove default value or provide different logic
alert("Manadotry fields should not left blank");
document.myForm1.MISDN.focus();
document.myForm1.Issue.focus();
document.myForm1.SR.focus();
document.myForm1.date.focus();
return false;
}
else if(a == "" && !a.match(numbers))
{
alert('Please input numeric characters only');
document.myForm1.MISDN.focus();
return false;
}
else if(!(b.match(numbers) && b.match(alpha)))
{
alert('Please input numeric and alphabets only');
document.myForm1.Issue.focus();
return false;
}
else if(!c.match(numbers))
{
alert('Please input numeric characters only');
document.myForm1.SR.focus();
return false;
}
else if(!d.match(Datee))
{
alert('Please input correct date');
document.myForm1.date.focus();
return false;
}
else
return true;
}
Your mistakes:
(i) form name spelling mistake (caseSensitive)
(ii) you used HTMLElement.value.value to check (in if conditions)
For example:
var a = document.forms["myForm1"]["MISDN"].value;
a.value.match(numbers); // it simply means HTMLElement.value.value (which will never work)

Categories