Here we have created some forms using Html, CSS, and JavaScript. Contact us to get help in HTML, CSS and JavaScript related homework, assignments, coursework or any projects.
Now we creating some basic forms which listed below:
Better Val_SimpleLogin
Form_check
JavaScript Form validation
JavaScript Form validation2
Generic_Reservation
Better Val_SimpleLogin
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Login</title>
<script type="text/javascript">
function validate(form){
var userName = form.Username.value;
var password = form.Password.value;
var errors = [];
if (!checkLength(userName)) {
errors.push("You must enter a username.");
}
if (!checkLength(password)) {
errors.push("You must enter a password.");
}
if (errors.length > 0) {
reportErrors(errors);
return false;
}
return true;
}
function checkLength(text, min, max){
min = min || 1;
max = max || 10000;
if (text.length < min || text.length > max) {
return false;
}
return true;
}
function reportErrors(errors){
var msg = "There were some problems...\n";
var numError;
for (var i = 0; i<errors.length; i++) {
numError = i + 1;
msg += "\n" + numError + ". " + errors[i];
}
alert(msg);
}
</script>
</head>
<body>
<h1>Login Form</h1>
<form method="post" action="Process.html"
onsubmit="return validate(this);">
Username: <input type="text" name="Username" size="10"><br>
Password: <input type="password" name="Password" size="10"><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset Form">
</p>
</form>
</body>
</html>Output:
Form_check
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>XHTML Form Example JS</title>
<script type="text/javascript" src="Form_check.js">
</script>
<style type="text/css">
.mandatory { color: red }
</style>
</head>
<body>
<h3>Please view source and study this form <br/> This from will be your source to complete CW 08 </h3>
<h1>Sign Up Now!</h1>
<form action="http://codd.cs.gsu.edu/~lhenry/formtest.php"
method="post"
id="signup_form"
onreset="return window.confirm('Are you sure you want to clear the form?');"
onsubmit="return checkCompleteness();">
<p>
<span class="mandatory">*</span><label id="name_label" for="visitor_name">Your Name:</label>
<input id="visitor_name" name="visitor_name" type="text" /></p>
<p>
<span class="mandatory">*</span><label id="pass1_label" for="password1">Password:</label>
<input id="password1" name="password1" type="password" /></p>
<p>
<span class="mandatory">*</span><label id="pass2_label" for="password2">Confirm Password:</label>
<input id="password2" name="password2" type="password" /></p>
<p>
<span class="mandatory">*</span>
<input id="licenseOK" name="licenseOK" type="checkbox" />
<label id="licenseOK_label" for="licenseOK">I accept</label> the license conditions.</p>
<p>
Specify account type desired:
<br />
<input name="account_type" type="radio" value="basic" /> Basic ($25)
<br />
<input name="account_type" type="radio" value="standard" checked="checked" /> Standard ($50)
<br />
<input name="account_type" type="radio" value="deluxe" /> Deluxe ($100)
<br />
<p>
Select your operating system:
<select name="system">
<option selected="selected"> Windows</option>
<option> Mac</option>
<option> Unix</option>
</select></p>
<p>
<input type="submit" value="Sign Up" />
<input type="reset" /></p>
</form>
</body>
</html>
Output:
JavaScript Form validation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Form validation</title>
<link rel="stylesheet" href="style.css">
<script>
// 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 name = document.contactForm.name.value;
var email = document.contactForm.email.value;
var mobile = document.contactForm.mobile.value;
var country = document.contactForm.country.value;
var gender = document.contactForm.gender.value;
var hobbies = [];
var checkboxes = document.getElementsByName("hobbies[]");
for(var i=0; i < checkboxes.length; i++) {
if(checkboxes[i].checked) {
// Populate hobbies array with selected values
hobbies.push(checkboxes[i].value);
}
}
// Defining error variables with a default value
var nameErr = emailErr = mobileErr = countryErr = genderErr = true;
// Validate name
if(name == "") {
printError("nameErr", "Please enter your name");
} else {
var regex = /^[a-zA-Z\s]+$/;
if(regex.test(name) === false) {
printError("nameErr", "Please enter a valid name");
} else {
printError("nameErr", "");
nameErr = 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;
}
}
// Validate mobile number
if(mobile == "") {
printError("mobileErr", "Please enter your mobile number");
} else {
var regex = /^[1-9]\d{9}$/;
if(regex.test(mobile) === false) {
printError("mobileErr", "Please enter a valid 10 digit mobile number");
} else{
printError("mobileErr", "");
mobileErr = false;
}
}
// Validate country
if(country == "Select") {
printError("countryErr", "Please select your country");
} else {
printError("countryErr", "");
countryErr = false;
}
// Validate gender
if(gender == "") {
printError("genderErr", "Please select your gender");
} else {
printError("genderErr", "");
genderErr = false;
}
// Prevent the form from being submitted if there are any errors
if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) {
return false;
} else {
// Creating a string from input data for preview
var dataPreview = "You've entered the following details: \n" +
"Full Name: " + name + "\n" +
"Email Address: " + email + "\n" +
"Mobile Number: " + mobile + "\n" +
"Country: " + country + "\n" +
"Gender: " + gender + "\n";
if(hobbies.length) {
dataPreview += "Hobbies: " + hobbies.join(", ");
}
// Display input data in a dialog box before submitting the form
alert(dataPreview);
}
};
</script>
</head>
<body>
<h3>Please view source and study this form <br/> This from will be your source to complete CW 08 </h3>
<form name="contactForm" onsubmit="return validateForm()" action="/examples/actions/confirmation.php" method="post">
<h2>Application Form</h2>
<div class="row">
<label>Full Name</label>
<input type="text" name="name">
<div class="error" id="nameErr"></div>
</div>
<div class="row">
<label>Email Address</label>
<input type="text" name="email">
<div class="error" id="emailErr"></div>
</div>
<div class="row">
<label>Mobile Number</label>
<input type="text" name="mobile" maxlength="10">
<div class="error" id="mobileErr"></div>
</div>
<div class="row">
<label>Country</label>
<select name="country">
<option>Select</option>
<option>Canada</option>
<option>Jamaica</option>
<option>United States</option>
<option>Europe</option>
</select>
<div class="error" id="countryErr"></div>
</div>
<div class="row">
<label>Gender</label>
<div class="form-inline">
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
</div>
<div class="error" id="genderErr"></div>
</div>
<div class="row">
<label>Hobbies <i>(Optional)</i></label>
<div class="form-inline">
<label><input type="checkbox" name="hobbies[]" value="sports"> Sports</label>
<label><input type="checkbox" name="hobbies[]" value="movies"> Movies</label>
<label><input type="checkbox" name="hobbies[]" value="music"> Music</label>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</body>
</html> Output:
style.css
body {
font-size: 16px;
background: #f9f9f9;
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
h2 {
text-align: center;
text-decoration: underline;
}
form {
width: 300px;
background: #fff;
padding: 15px 40px 40px;
border: 1px solid #ccc;
margin: 50px auto 0;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px
}
label i {
color: #999;
font-size: 80%;
}
input, select {
border: 1px solid #ccc;
padding: 10px;
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 2px;
}
.row {
padding-bottom: 10px;
}
.form-inline {
border: 1px solid #ccc;
padding: 8px 10px 4px;
border-radius: 2px;
}
.form-inline label, .form-inline input {
display: inline-block;
width: auto;
padding-right: 15px;
}
.error {
color: red;
font-size: 90%;
}
input[type="submit"] {
font-size: 110%;
font-weight: 100;
background: #006dcc;
border-color: #016BC1;
box-shadow: 0 3px 0 #0165b6;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
input[type="submit"]:hover {
background: #0165b6;
}JavaScript Form validation2
Frontend form validation using Parsley
Parsley is a javascript form validation library. It helps you provide your users with feedback on their form submission before sending it to your server. It saves you bandwidth, server load and it saves time for your users.
Javascript form validation is not necessary, and if used, it does not replace strong backend server validation.
That's why Parsley is here: to let you define your general form validation, implement it on the backend side, and simply port it frontend-side, with maximum respect to user experience best practices.
Data attributes
Parsley uses a specific DOM API which allows you to configure pretty much everything directly from your DOM, without writing a single javascript configuration line or custom function. Parsley's default DOM API is data-parsley-. That means that if in config you see a foo property, it can be set/modified via DOM with data-parsley-foo="value".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Form validation 2</title>
</head>
<body>
<h3>Please view source and study this form <br/> This from will be your source to complete CW 08 </h3>
<div class="bs-callout bs-callout-warning hidden">
<div>
<h4>Frontend form validation using Parsley </h4>
Parsley is a javascript form validation library. It helps you provide your users with feedback on their form submission before sending it to your server. It saves you bandwidth, server load and it saves time for your users.
<br/>
Javascript form validation is not necessary, and if used, it does not replace strong backend server validation.
<br/>
That's why Parsley is here: to let you define your general form validation, implement it on the backend side, and simply port it frontend-side, with maximum respect to user experience best practices.
<h4>Data attributes</h4>
Parsley uses a specific DOM API which allows you to configure pretty much everything directly from your DOM, without writing a single javascript configuration line or custom function. Parsley's default DOM API is data-parsley-. That means that if in config you see a foo property, it can be set/modified via DOM with data-parsley-foo="value".
<br/>
</div>
<h4>Oh snap! lets get gucci</h4>
<p>This form seems to be invalid :(</p>
</div>
<div class="bs-callout bs-callout-info hidden">
<h4>Yay!</h4>
<p>Everything seems to be ok :)</p>
</div>
<form id="demo-form" data-parsley-validate="">
<label for="fullname">Full Name * :</label>
<input type="text" class="form-control" name="fullname" required="">
<label for="email">Email * :</label>
<input type="email" class="form-control" name="email" data-parsley-trigger="change" required="">
<label for="contactMethod">Preferred Contact Method *:</label>
<p>
Email: <input type="radio" name="contactMethod" id="contactMethodEmail" value="Email" required="">
Phone: <input type="radio" name="contactMethod" id="contactMethodPhone" value="Phone">
</p>
<label for="hobbies">Hobbies (Optional, but 2 minimum):</label>
<p>
Skiing <input type="checkbox" name="hobbies[]" id="hobby1" value="ski" data-parsley-mincheck="2"><br>
Running <input type="checkbox" name="hobbies[]" id="hobby2" value="run"><br>
Eating <input type="checkbox" name="hobbies[]" id="hobby3" value="eat"><br>
Sleeping <input type="checkbox" name="hobbies[]" id="hobby4" value="sleep"><br>
Reading <input type="checkbox" name="hobbies[]" id="hobby5" value="read"><br>
Coding <input type="checkbox" name="hobbies[]" id="hobby6" value="code"><br>
</p>
<p>
<label for="heard">Heard about us via *:</label>
<select id="heard" required="">
<option value="">Choose..</option>
<option value="press">Press or fake news</option>
<option value="net">Internet or IG</option>
<option value="mouth">Word of mouth </option>
<option value="other">Other thingy or IDK.</option>
</select>
</p>
<p>
<label for="message">Message (20 chars min, 100 max) :</label>
<textarea id="message" class="form-control" name="message" data-parsley-trigger="keyup" data-parsley-minlength="20" data-parsley-maxlength="100" data-parsley-minlength-message="Come on! You need to enter at least a 20 character comment.." data-parsley-validation-threshold="10"></textarea>
</p>
<br>
<input type="submit" class="btn btn-default" value="validate">
<p><small>* Please, note that this demo form is not a perfect example The aim here is to show a quick overview of customizable behaviour.</small></p>
</form>
<script type="text/javascript">
$(function () {
$('#demo-form').parsley().on('field:validated', function() {
var ok = $('.parsley-error').length === 0;
$('.bs-callout-info').toggleClass('hidden', !ok);
$('.bs-callout-warning').toggleClass('hidden', ok);
})
.on('form:submit', function() {
return false; // Don't submit form for this demo
});
});
</script>
</form>
</body>
</html>
Output:
emailVal.js
<!--- Simple regular expression to validate email address --->
<script type ="text/javascript">
function validateEmail(email)Generic_Reservation
Code Implementation
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reservation</title>
<script language="JavaScript">
function validatedate(inputText)
{
var error="";
var dateformat = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;
// Match the date format through regular expression
if(inputText.value.match(dateformat))
{
document.form1.text1.focus();
//Test which seperator is used '/' or '-'
var opera1 = inputText.value.split('/');
var opera2 = inputText.value.split('-');
lopera1 = opera1.length;
lopera2 = opera2.length;
// Extract the string into month, date and year
if (lopera1>1)
{
var pdate = inputText.value.split('/');
}
else if (lopera2>1)
{
var pdate = inputText.value.split('-');
}
var dd = parseInt(pdate[0]);
var mm = parseInt(pdate[1]);
var yy = parseInt(pdate[2]);
// Create list of days of a month [assume there is no leap year by default]
var ListofDays = [31,28,31,30,31,30,31,31,30,31,30,31];
if (mm==1 || mm>2)
{
if (dd>ListofDays[mm-1])
{
inputText.style.background = 'Yellow';
error= "Invalid date format!";
return error;
}
}
if (mm==2)
{
var lyear = false;
if ( (!(yy % 4) && yy % 100) || !(yy % 400))
{
lyear = true;
}
if ((lyear==false) && (dd>=29))
{
inputText.style.background = 'Yellow';
error= "Invalid date format!";
return error;
}
if ((lyear==true) && (dd>29))
{
inputText.style.background = 'Yellow';
error= "Invalid date format!";
return error;
}
}
}
else
{
inputText.style.background = 'Yellow';
error= "Invalid date format!";
// document.form1.text1.focus();
return error;
}
}
function validateEmpty(fld) {
var error = "";
if (fld.value.length == 0) {
fld.style.background = 'Yellow';
error = "The required field has not been filled in.\n"
} else {
fld.style.background = 'White';
}
//alert (error);
return error;
}
function validateUsername(fld) {
var error = "";
var illegalChars = /\W/; // allow letters, numbers, and underscores
if (fld.value == "") {
fld.style.background = 'Yellow';
error = "You didn't enter a username.\n";
} else if ((fld.value.length < 2) || (fld.value.length > 20)) {
fld.style.background = 'Yellow';
error = "The username is the wrong length.\n";
} else if (illegalChars.test(fld.value)) {
fld.style.background = 'Yellow';
error = "The username contains illegal characters.\n";
} else {
fld.style.background = 'White';
}
//alert(error);
return error;
}
function trim(s)
{
return s.replace(/^\s+|\s+$/, '');
}
function validateEmail(fld) {
var error="";
var tfld = trim(fld.value); // value of field with whitespace trimmed off
var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ;
if (fld.value == "") {
fld.style.background = 'Yellow';
error = "You didn't enter an email address.\n";
} else if (!emailFilter.test(tfld)) { //test email for illegal characters
fld.style.background = 'Yellow';
error = "Please enter a valid email address.\n";
} else if (fld.value.match(illegalChars)) {
fld.style.background = 'Yellow';
error = "The email address contains illegal characters.\n";
} else {
fld.style.background = 'White';
}
//alert(error);
return error;
}
function validatePhone(fld) {
var error = "";
var stripped = fld.value.replace(/[\(\)\.\-\ ]/g, '');
if (fld.value == "") {
error = "You didn't enter a phone number.\n";
fld.style.background = 'Yellow';
} else if (isNaN(parseInt(stripped))) {
error = "The phone number contains illegal characters.\n";
fld.style.background = 'Yellow';
} else if (!(stripped.length == 10)) {
error = "The phone number is the wrong length. Make sure you included an area code.\n";
fld.style.background = 'Yellow';
}
//alert(error);
return error;
}
function validateformcnt()
{
var reason = "";
reason += validateUsername(theForm.field_2951); /* First Name */
//alert("Inside Validate function");
reason += validateUsername(theForm.field_3287); /* Last Name */
reason += validateEmail(theForm.field_3267); /* Email */
reason += validatePhone(theForm.field_3293); /* Cell Phone no */
reason += validateEmpty(theForm.field_1243); /* Company Name */
reason += validateEmpty(theForm.field_3295); /* Pick up Address */
reason += validateEmpty(theForm.field_3261); /* Drop Off Address */
reason += validateEmpty(theForm.field_3299); /* Airline & Flight Details */
reason += validatedate(theForm.field_3279); /* Pick up Date*/
reason += validateEmpty(theForm.field_3731); /* Pick up Time */
reason += validateEmpty(theForm.field_3981); /* Card holder Name Address*/
reason += validateEmpty(theForm.field_3973); /* Credit Card no */
reason += validatedate(theForm.field_3975); /* Expiration Date*/
reason += validateEmpty(theForm.field_3977); /* CVV */
reason += validateEmpty(theForm.field_3979); /* Credit Card Billing Address */
if (reason != "") {
{ alert("Some fields need correction:\n" + reason);
document.theForm.action= "http://codd.cs.gsu.edu/~c43759/TEST/Form.php";
}
}
if ( is_null(reason) || is_blank(reason))
document.theForm.action= "http://codd.cs.gsu.edu/~c43759/TEST/Formchk.php";
}
</script>
</head>
<body>
<h3><span>Please Fill out the form below</span></h3>
<form name="theForm" method="post" enctype="multipart/form-data">
<li> <label>First Name <sup>*</sup></label><span class="input"><input type="text" name="field_2951" ></span> </li>
<li> <label>Last Name <sup>*</sup></label><span class="input"><input type="text" name="field_3287"></span> </li>
<li> <label>Cell Phone number <sup>*</sup></label><span class="input"><input type="text" name="field_3293"></span> </li>
<li> <label>e-mail <sup>*</sup></label><span class="input"><input type="text" name="field_3267"></span> </li>
<li> <label>Company name</label><span class="input"><input type="text" name="field_1243"></span> </li>
<li>
<label>Select Vehicle Type <sup>*</sup></label>
<span>
<select name="field_3271" class="custom-select required">
<option value="Sedan Town Car">Sedan Town Car</option>
<option value="SUV">SUV</option>
<option value="Stretch Limousine">Stretch Limousine</option>
</select>
</span>
</li>
<li> <label>Pick Up Address (or Airport) <sup>*</sup></label><span class="input"><input type="text" name="field_3295"></span> </li>
<li> <label>Drop Off Address (or Airport) <sup>*</sup></label><span class="input"><input type="text" name="field_3261"></span> </li>
<li> <label>Airline & Flight # <sup>*</sup></label><span class="input"><input type="text" name="field_3299"></span> </li>
<li> <label>Number Of Passengers <sup>*</sup></label>
<span>
<select name="field_3739">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="other">other</option>
</select>
</span>
</li>
<li> <label>Pick-Up Date <sup>*</sup>:</label> <span><input type="text" name="field_3279"></span> </li>
<li> <label>Pick up Time <sup>*</sup></label><span ><input type="text" name="field_3731"></span> </li>
<li> <label>How Many pieces of Luggage ? <sup>*</sup></label>
<span>
<span >
<input type="radio" name="field_3291[]" value="1-3">
<label>1-3</label>
</span>
<span>
<input type="radio" name="field_3291[]" value="4-6">
<label>4-6</label>
</span>
</span>
</li>
<li> <label>How did you hear about us? <sup>*</sup></label>
<span>
<select name="field_2959">
<option value="Other...">Other...</option>
<option value="Google">Google</option>
<option value="Yelp">Yelp</option>
<option value="Friend">Friend</option>
</select>
</span>
</li>
<li>
<label>Payment type <sup>*</sup></label>
<span>
<input type="radio" name="field_3281" value="Credit Card (All major credit cards accepted)">
<label>Credit Card (All major credit cards accepted)</label>
<span>
<input type="radio" name="field_3281" value="Cash (Still Need Credit Card For Booking)">
<label>Cash (Still Need Credit Card For Booking)</label>
</span>
</span>
</li>
<li>
<label>Credit Card Info <sup>*</sup></label>
<span>
<select name="field_3971">
<option value="Visa">Visa</option>
<option value="Master Card">Master Card</option>
<option value="American Express">American Express</option>
<option value="Discovery">Discovery</option>
</select>
</span>
</li>
<li> <label>Card Holders First And Last Name <sup>*</sup></label><span class="input"><input type="text" name="field_3981" ></span></li>
<li> <label>Credit Card Number <sup>*</sup></label><span class="input"><input type="text" name="field_3973" ></span></li>
<li> <label>Expiration Date <sup>*</sup></label><span class="input"><input type="text" name="field_3975"></span> </li>
<li> <label>CVV <sup>*</sup></label><span class="input"><input type="text" name="field_3977"></span> </li>
<li> <label>Credit Card Billing Address <sup>*</sup></label>
<span>
<textarea name="field_3979" ></textarea>
</span>
</li>
<br><br>
<button type="btnsubmit" onClick="validateformcnt(this);"> Reserve my ride Now! </button>
</ul>
</form>
</body>
</html>Send request to get help in other HTML, CSS, JavaScript related assignments, projects and homework at realcode4you@gmail.com and get instant help without any plagiarism.
Comments