Here is my html code with javascript validations.... HTML elements are showing well javascript function is not working.....
<html>
<head>
<title>SIGNUP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function valid(fname,sname,login,name,tstest,mailf,mails){
var namef=fname.value;
var names=sname.value;
var logn=login.value;
var name1=name.value;
var ts=tstest.value;
var mailf=mail1.value;
var mails=.mail2.value;
if(namef=="") <!-- validating the field first name-->
{
window.alert("please enter name.");
fname.focus();
}
else if(names=="")<!-- validating the field second name-->
{
window.alert("please enter password");
sname.focus();
}
else if(names<=6)
{
window.alert("Password should be more than 6 characters");
sname.focus();
}
else if(logn=="")<!-- validating the login field-->
{
window.alert("please enter email.");
login.focus();
}
else if(name1=="")<!-- validating the password field-->
{
window.alert("please enter confirm password.");
name.focus();
}
else if(name1!=names)
{
window.alert("Password Mismatch");
name.focus();
}
else if(ts=="")<!-- validating the date field-->
{
alert("please enter contact number.");
tstest.focus();
}
else if(ts<10)
{
alert("Contact Number Should be Minimum 10 numbers");
tstest.focus();
}
else if(mailf=="")<!-- validating the mail field-->
{
alert("please enter qualification.");
mail1.focus();
}
else if(mails=="")<!-- validating the 2nd mail field-->
{
alert("please enter interested in.");
mail2.focus();
}
}
}
</script>
</head>
<body>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<div>
<h1>SIGNUP FORM</h1>
<form name="sign" onsubmit="valid(fname,sname,login,pwd,tstest,mail1,mail2)" >
<table name="signuptable">
<tr><td>FIRST NAME</td><td><input type="text" name="fname" size="50"/></td></tr>
<tr><td>LAST NAME</td><td><input type="text" name="sname" size="50"/></td></tr>
<tr><td>DESIRED LOGIN NAME</td><td><input type="text" name="login" size="50"/></td></tr>
<tr><td>PASSWORD</td><td><input type="password" name="pwd" size="50"/></td></tr>
<tr><td>RE-TYPE PASSWORD</td><td><input type="password" name="repwd" size="50"/></td></tr>
<tr><td>GENDER</td><td><input type="radio" name="gender" value="Male"/>Male<input type="radio" name="gender" value="FeMale"/>Female</td></tr>
<tr><td>DATE OF BIRTH</td><td><form name="tstest">
<input type="text" readonly size="47" name="timestamp" value="">
<img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp">
</form></td></tr>
<tr><td>MAIL ID</td><td><input type="text" name="mail1" size="30">#<input type="text" name="mail2" size="11"></td></tr>
<tr><td>EMPLOYEE ID</td><td><input type="text" name="eid" size="50"></td></tr>
<tr><td>TYPE OF USER</td><td><input type="radio" name="manager"/>Manager<input type="radio" name="manager"/>SeniorManager</td></td></tr>
<tr><td>ADDRESS</td><td><textarea rows="9" cols="40" name="addr"></textarea></td></tr>
<tr><td>MOBILE NUMBER</td><td><input type="text" size="50" name="mobile"></td></tr>
<tr><td></td><td><input type="submit" name="sign" value="SUBMIT"> <input type="reset" name="cancel" value="CANCEL"/></td></tr>
</table>
</div>
</form>
</br><div>Designed by:STUDY CENTER</div>
</div>
</center>
</body>
line 13, you have a "dot"
mails=.mail2.value;
line 66 syntax error you had a wrong placed brace
try removing the dot and the brace and see if it works as expeted
pulse window.alert() , you only need to use alert()
and your redeclaring you variables
your onsubmit argument mail2 differs from the expeted one mails
Related
When writing for special characters in password, it does not pass through, only the empty field and 6 character limit are egistered. I checked a bunch of places but I still get no result no matter where I look. When the regex was not there the confirm password entries worked as well, so something is out of place
Javascript:
function VerifyAndConfirmPassword()
{
var pw = document.forms["form"]["passPass"].value;
var pwC = document.forms["form"]["passCPass"].value;
if(pw == "")
{
alert("Password field is required");
return false;
}
if(pw.length < 6)
{
alert("Password length must be atleast 6 characters");
return false
}
var validPass = /^(?=.*[0-9])(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]$/
if(!pw.value.match(validPass))
{
alert("Password requires at least one capital and lowercase letter , one number, and one special character")
return false;
}
if(pwC == "")
{
alert("Confirm Password field is required");
return false;
}
if(pw != pwC)
{
alert("Passwords do not match");
return false;
}
else
{
return true;
}
}
function VerifyAndConfirmPassword()
{
var pw = document.forms["form"]["passPass"].value;
var pwC = document.forms["form"]["passCPass"].value;
if(pw == "")
{
alert("Password field is required");
return false;
}
if(pw.length < 6)
{
alert("Password length must be atleast 6 characters");
return false
}
var validPass = /^(?=.*[0-9])(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]$/
if(!pw.value.match(validPass))
{
alert("Password requires at least one capital and lowercase letter , one number, and one special character")
return false;
}
if(pwC == "")
{
alert("Confirm Password field is required");
return false;
}
if(pw != pwC)
{
alert("Passwords do not match");
return false;
}
else
{
return true;
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content = "width=device-width, initial-scale = 1.0">
<link rel="stylesheet" href="Assignment4.css">
</head>
<body>
<form name="form" onsubmit="return FirstName() && LastName() && Address() && City() && PostalCode() && ProvinceValues() && Age() && VerifyAndConfirmPassword() && Email()" method="post" action="mailto:jjohn#JJohnsonRE.ca">
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="txtFirst" maxlength="100" placeholder="Your First Name"><br><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="txtLast"maxlength="100" placeholder="Your Last Name"><br><br>
<label for="address">Address:</label><br>
<input type="text" name="txtAdd" maxlength="100" placeholder="Address"><br><br>
<label for="city">City:</label><br>
<input type="text" name="txtCity" maxlength="100" placeholder="City"><br><br>
<label for="postalCode">Postal Code:</label><br>
<input type="text" name="txtPC" maxlength="100" placeholder="Postal Code"><br><br>
<label for="province">Province: (Must use initials)</label><br>
<input type="text" id="txtPro" maxlength="100" placeholder="Province"><br><br>
<label for="age">Age:</label><br>
<input type="number" name="numAge" maxlength="100" placeholder="Age"><br><br>
<label for="password">Password:</label><br>
<input type="password" name="passPass" id="passPass" maxlength="100" placeholder="Password"><br><br>
<span id="message"></span>
<label for="Cpassword">Confirm Password:</label><br>
<input type="password" id="passCPass" name="passCPass" maxlength="100" placeholder="Password"><br><br>
<span id="messageC"></span>
<span id="confirm"></span>
<label>Your Email:</label><br>
<input name="txtEmail" type="text" maxlength="100" placeholder="Email"><br><br>
<input type="submit" value="Register Now">
<input type="reset" value="Clear Form">
</form>
<script src="Assignment4.js"></script>
</body>
</html>
!pw.value.match(validPass)
pw is already the value of the input field (defined as document.forms["form"]["passPass"].value). Getting the value property of a String returns null, and thus you get the error. Just use simply:
!pw.match(validPass)
You should also be returning the result of VerifyAndConfirmPassword() on submit, not FirstName() && LastName() && Address() && City() && PostalCode() && ProvinceValues() && Age() && VerifyAndConfirmPassword() && Email().
Use:
function VerifyAndConfirmPassword() {
var pw = document.forms["form"]["passPass"].value;
var pwC = document.forms["form"]["passCPass"].value;
if (pw == "") {
alert("Password field is required");
return false;
}
if (pw.length < 6) {
alert("Password length must be atleast 6 characters");
return false
}
var validPass = /^(?=.*[0-9])(?=.*[!##$%^&*])[a-zA-Z0-9!##$%^&*]$/
if (!pw.match(validPass)) {
alert("Password requires at least one capital and lowercase letter , one number, and one special character")
return false;
}
if (pwC == "") {
alert("Confirm Password field is required");
return false;
}
if (pw != pwC) {
alert("Passwords do not match");
return false;
} else {
return true;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0">
<link rel="stylesheet" href="Assignment4.css">
</head>
<body>
<form name="form" onsubmit="return VerifyAndConfirmPassword()" method="post" action="mailto:jjohn#JJohnsonRE.ca">
<label for="fname">First Name:</label><br>
<input type="text" id="fname" name="txtFirst" maxlength="100" placeholder="Your First Name"><br><br>
<label for="lname">Last Name:</label><br>
<input type="text" id="lname" name="txtLast" maxlength="100" placeholder="Your Last Name"><br><br>
<label for="address">Address:</label><br>
<input type="text" name="txtAdd" maxlength="100" placeholder="Address"><br><br>
<label for="city">City:</label><br>
<input type="text" name="txtCity" maxlength="100" placeholder="City"><br><br>
<label for="postalCode">Postal Code:</label><br>
<input type="text" name="txtPC" maxlength="100" placeholder="Postal Code"><br><br>
<label for="province">Province: (Must use initials)</label><br>
<input type="text" id="txtPro" maxlength="100" placeholder="Province"><br><br>
<label for="age">Age:</label><br>
<input type="number" name="numAge" maxlength="100" placeholder="Age"><br><br>
<label for="password">Password:</label><br>
<input type="password" name="passPass" id="passPass" maxlength="100" placeholder="Password"><br><br>
<span id="message"></span>
<label for="Cpassword">Confirm Password:</label><br>
<input type="password" id="passCPass" name="passCPass" maxlength="100" placeholder="Password"><br><br>
<span id="messageC"></span>
<span id="confirm"></span>
<label>Your Email:</label><br>
<input name="txtEmail" type="text" maxlength="100" placeholder="Email"><br><br>
<input type="submit" value="Register Now">
<input type="reset" value="Clear Form">
</form>
<script src="Assignment4.js"></script>
</body>
</html>
Phone - text field - requires validation (Must be of the format "208-555-5555". Give this field the name phone.
Credit Card - text field - requires validation (must be 16 digits). Give this field the name credit_card. Must use this format: 1111 1111 1111 1111
Credit Card Expiration Date - text field - requires validation of data entered (i.e. valid month (1-12) and valid year (> 2020). Give this field the name exp_date. It must use this format: 01/2020.
Submit Button - When this button is clicked, you should validate that the first name, last name, address, phone, credit card, and expiration date fields all have been filled out. If any field is missing text, prevent the form from submitting and set the focus to the first missing text field.
<input type = "tel" id = "phone" class ="validate" name = "phone" pattern ="^\d{3}-\d{3}-\d{4}$"required placeholder = " +233-55-1018-495" title =" Your phone number should match the format displayed">
<div>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname" placeholder="Nana Dickson"><br><br>
<label for="ccnum">Credit Card</label>
<input type="text" id="ccnum" name="credit_card" class ="validate" placeholder="1111-1111-1111-1111"><br><br>
</div>
<div class="row">
<div class="col-50">
<label for="expyear">Credit Card Expiration Date</label>
<input type="text" class ="validate" id="exp_date" name="exp_date" placeholder="01/2021"
<div class="col-50"><br>
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="352">
</div>
</div>
</div>
<input type="submit" value="Submit" class="btn" name ="validate">
check this out
<head>
<script>
function submitform() {
var name =
document.forms["RegForm"]["Name"];
var email =
document.forms["RegForm"]["EMail"];
var phone =
document.forms["RegForm"]["Telephone"];
var what =
document.forms["RegForm"]["Subject"];
var password =
document.forms["RegForm"]["Password"];
var address =
document.forms["RegForm"]["Address"];
if (name.value == "") {
window.alert("Please enter your name.");
name.focus();
return false;
}
if (address.value == "") {
window.alert("Please enter your address.");
address.focus();
return false;
}
if (email.value == "") {
window.alert(
"Please enter a valid e-mail address.");
email.focus();
return false;
}
if (phone.value == "") {
window.alert(
"Please enter your telephone number.");
phone.focus();
return false;
}
if (password.value == "") {
window.alert("Please enter your password");
password.focus();
return false;
}
if (what.selectedIndex < 1) {
alert("Please enter your course.");
what.focus();
return false;
}
return true;
}
</script>
<style>
div {
box-sizing: border-box;
width: 100%;
border: 100px solid black;
float: left;
align-content: center;
align-items: center;
}
form {
margin: 0 auto;
width: 600px;
}
</style>
</head>
<body>
<h1 style="text-align: center;">REGISTRATION FORM</h1>
<form name="RegForm" action="/submit.php"
onsubmit="return submitform()" method="post">
<p>Name: <input type="text"
size="65" name="Name" /></p>
<br />
<p>Address: <input type="text"
size="65" name="Address" />
</p>
<br />
<p>E-mail Address: <input type="text"
size="65" name="EMail" /></p>
<br />
<p>Password: <input type="text"
size="65" name="Password" /></p>
<br />
<p>Telephone: <input type="text"
size="65" name="Telephone" /></p>
<br />
<p>
SELECT YOUR COURSE
<select type="text" value="" name="Subject">
<option>BTECH</option>
<option>BBA</option>
<option>BCA</option>
<option>B.COM</option>
<option>Ms</option>
</select>
</p>
<br />
<br />
<p>Comments: <textarea cols="55"
name="Comment"> </textarea></p>
<p>
<input type="submit"
value="send" name="Submit" />
<input type="reset"
value="Reset" name="Reset" />
</p>
</form>
</body>
I am trying to validate my form before submitting it but the form is being submitted anyway without any alerts coming up, even though the form is being submitted blank. When the submit button is clicked I want to make sure information has been completed and is correct, and when it is blank or incorrect an alert should come up without submitting the form.
Thanks
HTML
<!DOCTYPE html>
<html>
<head>
<title>Oaktown Football Club</title>
<meta charset="UTF-8">
<script src="formValidation.js"></script>
</head>
<body>
<header>
<img src="logo.png" alt="Oaktown Football Club Logo"/>
<h1>Oaktown Football Club</h1>
<nav>
Homepage
Competitions
Contact
</nav>
</header>
<section>
<h2>Contact Us</h2>
<article>
<h3>Secretary</h3>
<p>Name: Laci Tanner</p>
<p>Phone: (02) 6620 3324</p>
<p>Email: secretary#oaktownfa.com.au</p>
<h3>Leave us a message</h3>
<form method="post" action="actionPage.html" name="contactForm" onsubmit="return formValidation();">
<label>Full Name:</label><br>
<input type="text" size="35" name="fullName" id="name"><br>
<br><label>Email:</label><br>
<input type="text" size="35" name="email" id="email"><br>
<br><label>Phone:</label><br>
<input type="text" size="35" name="phone" id="phone"><br>
<br><label>Team:</label><br>
<select name="team"><br>
<option>Please Choose</option>
<option>Adults</option>
<option>Under 12s</option>
<option>Under 6s</option>
</select><br>
<br><label>I am:</label><br>
<select name="Member"><br>
<option>Please Choose</option>
<option>Thinking about joining the club</option>
<option>Already a club member</option>
</select><br>
<br><label>Comments:</label><br>
<textarea id="comments" type="text" rows="5" cols="75"></textarea><br>
<br><input id="submit" type="submit" value="Submit"><br>
<br><input type="reset">
</form>
</article>
</section>
<footer>
<p>Copyright - Oaktown Football Club</p>
</footer>
</body>
</html>
JavaScript
function formValidation()
{
var name = document.contactForm.fullName;
var email = document.contactForm.email;
var phone = document.contactForm.phone;
var comment = document.contactForm.comment;
if (fullName.value == "") {
alert("Please enter your name!");
fullName.focus();
return false;
}
if (email.value == "") {
alert("Please enter your email address!");
email.focus();
return false;
}
if (email.value.indexOf("#", 0) < 0) {
alert("Please enter a valid email address!");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0) {
alert("Please enter a valid email address!");
email.focus();
return false;
}
if (phone.value == "") {
alert("Please enter your phone number!");
phone.focus();
return false;
}
if (phone.length < 2) {
alert("Please enter a valid phone number!");
phone.focus();
return false;
}
if (comments.value == "") {
alert("Please leave us a comment!");
comments.focus();
return false;
}
{
return true;
}
}
It seems you had stored the value of the 'Full Name' in the variable 'name', but you were checking in your first 'if' block, you were checking if "fullName.value == ''".
Thus, a 'Reference Error' was being thrown.
After correcting it to if "name.value == ''", the code works fine.
Please find below the working code in JSBin :-
http://jsbin.com/kemokijucu/edit?html,js,console,output
You get name :
var name = document.contactForm.fullName;
But check by fullName :
if (fullName.value == "") {
alert("Please enter your name!");
fullName.focus();
return false;
}
Please up the code :)
You have made mistake in fetching & using name element from the form. Below is the correction in JS.
function formValidation() {
var fullName = document.contactForm.name;
var email = document.contactForm.email;
var phone = document.contactForm.phone;
var comment = document.contactForm.comment;
if (fullName.value == "") {
alert("Please enter your name!");
fullName.focus();
return false;
}
if (email.value == "") {
alert("Please enter your email address!");
email.focus();
return false;
}
if (email.value.indexOf("#", 0) < 0) {
alert("Please enter a valid email address!");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0) {
alert("Please enter a valid email address!");
email.focus();
return false;
}
if (phone.value == "") {
alert("Please enter your phone number!");
phone.focus();
return false;
}
if (phone.length < 2) {
alert("Please enter a valid phone number!");
phone.focus();
return false;
}
if (comments.value == "") {
alert("Please leave us a comment!");
comments.focus();
return false;
} {
return true;
}
}
<title>
Oaktown Football Club</title>
<body>
<header>
<img src="logo.png" alt="Oaktown Football Club Logo" />
<h1>Oaktown Football Club</h1>
<nav>
Homepage
Competitions
Contact
</nav>
</header>
<section>
<h2>Contact Us</h2>
<article>
<h3>Secretary</h3>
<p>Name: Laci Tanner</p>
<p>Phone: (02) 6620 3324</p>
<p>Email: secretary#oaktownfa.com.au</p>
<h3>Leave us a message</h3>
<form method="post" action="actionPage.html" name="contactForm" onsubmit="return formValidation();">
<label>Full Name:</label>
<br>
<input type="text" size="35" name="fullName" id="name">
<br>
<br>
<label>Email:</label>
<br>
<input type="text" size="35" name="email" id="email">
<br>
<br>
<label>Phone:</label>
<br>
<input type="text" size="35" name="phone" id="phone">
<br>
<br>
<label>Team:</label>
<br>
<select name="team">
<br>
<option>Please Choose</option>
<option>Adults</option>
<option>Under 12s</option>
<option>Under 6s</option>
</select>
<br>
<br>
<label>I am:</label>
<br>
<select name="Member">
<br>
<option>Please Choose</option>
<option>Thinking about joining the club</option>
<option>Already a club member</option>
</select>
<br>
<br>
<label>Comments:</label>
<br>
<textarea id="comments" type="text" rows="5" cols="75"></textarea>
<br>
<br>
<input id="submit" type="submit" value="Submit">
<br>
<br>
<input type="reset">
</form>
</article>
</section>
<footer>
<p>Copyright - Oaktown Football Club</p>
</footer>
</body>
Do try and debug the same using console in the browser.
You can change the type attribute of email field to email for auto email validation on the field.
This is my first time with javascript. I'm making a basic login page where there is a control for the email input. I would like to put an error message of some kind when someone gives an email address with illegal symbol. Here my code:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<form action="Home.html" method="post">
<label for="id">Username</label>
<input type="text" name="id" id="id" value="" />
<br/>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" value="" />
<br/>
<label for="email">Email</label>
<input type="email" name="email" id="email" value="" />
<br/>
<script type="text/javascript">
function checkEmail ()
{
var emailObject = document.getElementById("email");
var email = emailObject.getAttribute("value").toString();
var error = document.createTextNode("Uncorrect email");
var result = email.search("/[^(a-z | A-Z | 0-9 | #)]/");
if(result !== -1)
{
emailObject.appendChild(error);
}
}
</script>
<button type="button" onclick="checkEmail()"> Confirm </button>
</form>
</div>
</body>
</html>
I have a function I use to validate email addresses, it uses regex. I would suggest jQuery just to show/hide the error message.
function validEmail(val){
if(val.length < 6 || val.length > 255) return false;
return new RegExp(/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/).test(val);
}
$(function(){
$("#email").on("change", function(){
var email = $("#email").val();
if(!validEmail(email)){
$("#emailError").show();
} else {
$("#emailError").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<!-- Some Inputs here -->
<span id='emailError' style='display: none;'>Please enter a valid email address</span><br>
<input type='email' id='email' name='email' placeholder='Email Address' />
<!-- More Inputs here -->
<button type='submit'>Submit</button>
</form>
you're trying to append something to an input element (email input, in this case). I'd suggest to append it to your main div, which in this case I have identified as "YOUR_ID".
Also, I suggest you a more efficint way to check a valid email.
follow the below example
<body>
<div id="YOUR_ID">
<form action="Home.html" method="post">
<label for="id">Username</label>
<input type="text" name="id" id="id" value="" />
<br/>
<label for="pass">Password</label>
<input type="password" name="pass" id="pass" value="" />
<br/>
<label for="email">Email</label>
<input type="email" name="email" id="email" value="" />
<br/>
<script type="text/javascript">
function checkEmail ()
{
var emailObject = document.getElementById("email");
var divObject = document.getElementById("YOUR_ID");
var email = emailObject.getAttribute("value").toString();
var error = document.createTextNode("Uncorrect email");
var check = /^([\w-]+(?:\.[\w-]+)*)#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var result = check.test(email);
if(result !== -1)
{
divObject.appendChild(error);
}
}
</script>
<button type="button" onclick="checkEmail()"> Confirm </button>
</form>
</div>
</body>
I'm trying to use javascript to perform client-side verification of input to the following form. The 'firstname' field should contain only alphabetical characters. How can I write the validation function to implement this behaviour?
form.html
<html>
<head>
<script type="text/javascript" src="mainform.js"></script>
</head>
<body>
<form name="mainform" method="post" onSubmit="return validation();" >
firstname <input type="text" name="firstname"><br>
lastname <input type="text" name="lastname"><br>
username <input type="text" name="username"><br>
password <input type="password" name="password"><br>
confirm password<input type="password" name="cpassword"><br>
email <input type="email" name="email"><br>
phone no <input type="text" name="phoneno"><br>
<input type="submit" name="submit">
</body>
</html>
form.js
function validation()
{
var fname=document.mainform.firstname;
var letters="/[a-zA-Z]$/";
if(fname.value.match(letters)){
return true;
}
else
{
alert('first name must be alphabets');
fname.focus();
return false;
}
}
function validation()
{
var fname = document.mainform.firstname;
if(/^[a-zA-Z]+$/.test(fname.value)) {
return true;
} else {
alert('first name must be alphabets');
fname.focus();
return false;
}
}
Do not forget to make a check on the server side too for security.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hide</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style type="text/css">
label input[type="button"]
{
background: #E17698;
}
</style>
<script>
$(document).delegate("#submit","click",function(e)
{
var name = $("#fname").val();
var hasError = false;
var searchReg = /^[a-zA-Z ]+$/;
if(name == '') {
$("#txtt").after('<span class="error" style="color:red;"> *Fill Name Box</span>');
hasError = true;
} else if(!searchReg.test(name)) {
$("#txtt").after('<span class="error" style="color:red;"> **Enter Vaild Name.</span>');
hasError = true;
}else if(searchReg.test(name)) {
$("#txtt").after('<span class="error" style="color:white;"> Vaild Name</span>');
}
if(hasError == true) {
return false
}
});
</script>
</head>
<body>
<form name="mainform" method="post">
firstname <input type="text" name="firstname" id='fname'><label id="txtt"></label><br>
lastname <input type="text" name="lastname"><br>
username <input type="text" name="username"><br>
password <input type="password" name="password"><br>
confirm password<input type="password" name="cpassword"><br>
email <input type="email" name="email"><br>
phone no <input type="text" name="phoneno"><br>
<input type="submit" name="submit" id='submit'>
</form>
</body>
</html>