FormValidatorwihtParsley

EasyProgramming.net tutorial on reading and writing form element data

by George Obregon

HTML

<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  
<!-- Load Parsley Data Validation -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.1/parsley.min.js"></script>

<!-- Easy JavaScript # 18 - Reading and Writing Form Element Values -->
<p>
  I need this page to rip apart the paragraph I'll give it to find the the FlightNumber, Travel Dates, Reservation code and E-ticket Number. <a href="http://www.mtomtours.com/itinerary">Itinerary Generator Test 1</a>.
</p>
<p>
  Let's take a look!
</p>
<form class="demo-form">
  <div class="form-section">
    <label for="name">Name: </label>
    <input id="name" type="text" class="form-control" name="name" required="" /><br /><br />
    <label for="city">City: </label>
    <input id="city" type="text" class="form-control" name="city" required=""/><br /><br />
        <label for="email">Email:</label>
   ...

CSS

#outputName,
#outputCity {
  color: red;
}

JavaScript

var submit = document.getElementById("submit");
var capitalize = document.getElementById("capitalize");
var clear = document.getElementById("clear");

submit.onclick = function() {
  var name = document.getElementById("name").value;
  var city = document.getElementById("city").value;

  document.getElementById("outputName").innerText = name;
  document.getElementById("outputCity").innerText = city;
}

capitalize.onclick = function() {
  var name = document.getElementById("name").value;
  var city = document.getElementById("city").value;
  

  document.getElementById("name").value = name.toUpperCase();
  document.getElementById("city").value = city.toUpperCase();
}

clear.onclick = function() {
  document.getElementById("name").value = "";
  document.getElementById("city").value = "";
}