JavaScript, HTML, CSS Assignment Help| Creating Forms Using JavaScript



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" <