Booststrap Form - Liam McConlogue - CS221-PR1-ltm34

booststrap-form-liam-mcconlogue-cs221-pr1-ltm34.markdown

Booststrap Form - Liam McConlogue - CS221-PR1-ltm34

A Pen by liammccon on CodePen.

License.

index.html

<div class="ltm-section-margin"></div>
<div class="container-fluid">
  <h1 class="text-danger">Bootstrap Booking Form</h1>
  <div class="ltm-info-textbox container-fluid">
    <i class="fa fa-info-circle"></i> &nbsp Fill out the form and click the submit button when complete...
  </div>
  <form id="ltm-form">
    <div class="row">
      <div class="col-lg-6 ltm-layout-half">

        <!--USER SECTION-->
        <div class="card border-primary">
          <h5 class="card-header bg-primary text-center text-white">User</h5>
          <div class="card-body">
            <div class="form-group row">

              <!--First name-->
              <label for="first-name" class="col-sm-3 col-form-label text-center">First name:</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="first-name" placeholder="Enter first name" required>
              </div>

              <div class="col-sm-12 ltm-section-margin"></div>

              <!--Last name-->
              <label for="last-name" class="col-sm-3 col-form-label text-center">Last name:</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="last-name" placeholder="Enter last name" required>
              </div>

              <div class="col-sm-12 ltm-section-margin"></div>

              <!--User name-->
              <label for="username" class="col-sm-3 col-form-label text-center">Username:</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" id="username" placeholder="Enter username" required>
              </div>

            </div>
          </div>
        </div>
        <div class="ltm-section-margin"></div>

        <!-- CONTACT SECTION -->
        <div class="card border-primary">
          <h5 class="card-header text-center bg-primary text-white">Contact</h5>
          <div class="card-body">
            <!--Phone number -->
            <label for="phone-number" class="ltm-hidden-label"></label>
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text">
                  <i class="fa fa-phone"></i>
                </div>
              </div>
              <input type="number" class="form-control" id="phone-number" placeholder="Enter phone number">
            </div>

            <!--Fax number -->
            <label for="fax-number" class="ltm-hidden-label"></label>
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text">
                  <i class="fa fa-fax"></i>
                </div>
              </div>
              <input type="number" class="form-control" id="fax-number" placeholder="Enter fax number">
            </div>

            <!--Email -->
            <label for="email-address" class="ltm-hidden-label"></label>
            <div class="input-group mb-2">
              <div class="input-group-prepend">
                <div class="input-group-text">
                  <i class="fa fa-envelope"></i>
                </div>
              </div>
              <input type="text" class="form-control" id="email-address" placeholder="Enter email address">
            </div>
          </div>

        </div>

        <div class="ltm-section-margin"></div>

        <!--SCHEDULE-->
        <div class="card border-primary">
          <h5 class="card-header bg-primary text-center text-white">Schedule</h5>
          <div class="card-body">
            <div class="form-group row">
              <!--Num of adults-->
              <label class="col-sm-3 col-form-label" for="number-of-adults">Adults:</label>
              <div class="col-sm-9">
                <select class="custom-select ltm-schedule" id="number-of-adults">
                  <option value="-1" selected>Choose...</option>
                  <option value="1">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
                  <option value="4">Four</option>
                  <option value="5">Five</option>
                </select>
              </div>
              <div class="col-sm-12 ltm-card-inner-spacer"></div>

              <!--Check in-->
              <div class="col-sm-6 ">
                <label for="check-in">Check in date:</label>
                <br>
                <div class="md-form md-outline input-with-post-icon datepicker">
                  <input placeholder="Select date" type="date" id="check-in" class="form-control ltm-schedule">
                </div>

              </div>

              <!--Check out-->
              <div class="col-sm-6">
                <label for="check-out">Check out date:</label>
                <br>
                <div class="md-form md-outline input-with-post-icon datepicker">
                  <input placeholder="Select date" type="date" id="check-out" class="form-control ltm-schedule">
                </div>

              </div>
              <div class="col-sm-12 ltm-card-inner-spacer"></div>

              <!--Days-->
              <div class="col-sm-6">
                <label>Days:</label>
                <input id="num-of-days" class="form-control ltm-read-only" type="text" placeholder="Displays num of days…" readonly>
              </div>

              <!--Cost-->
              <div class="col-sm-6">
                <label>Cost:</label>
                <input id = "cost" class="form-control ltm-read-only" type="text" placeholder="Displays cost…" readonly>
              </div>
            </div>
          </div>
        </div>
        <div class="ltm-section-margin"></div>

      </div>
      <div class="col-lg-6 ltm-layout-half">

        <!--OTHER-->
        <div class="card border-primary">
          <h5 class="card-header bg-primary text-center text-white">Other</h5>
          <div class="card-body">
            <div class="form-group">

              <!--Textarea-->
              <label for="message">Message:</label>
              <textarea class="form-control rounded-0" id="message" placeholder="Enter message here..." rows="10"></textarea>

              <!--Slider-->
              <div class="ltm-card-inner-spacer"></div>
              <label for="range-slider">Range:</label>
              <input id="range-slider" type="range" class="custom-range" min="0" max="10" id="customRange2">

              <!--Priority-->
              <div class="ltm-card-inner-spacer"></div>
              
              <label>Priority: </label>
              <br>
              <!--low-->
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="priority-radio-low" name="priority-radios" class="custom-control-input" checked="checked">
                <label class="custom-control-label" for="priority-radio-low">Low</label>
              </div>
              <!--med-->
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="priority-radio-med" name="priority-radios" class="custom-control-input">
                <label class="custom-control-label" for="priority-radio-med">Med</label> 
              </div>
              <!--high-->
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="priority-radio-high" name="priority-radios" class="custom-control-input">
                <label class="custom-control-label" for="priority-radio-high">High</label>
              </div>

            </div>
          </div>
        </div>

      </div>
    </div>
    <hr>

  </form>
  <div class="row ltm-button-row">
    <div class="col-sm-7"> </div>
    <div class="col-sm-2">
      <button class="btn btn-block btn-danger ltm-btn" onclick="clearAllInputs()">
        <i class="fa fa-trash"></i> &nbsp Clear form
      </button>
    </div>
    <div class="col-sm-2">
      <button class="btn btn-block btn-primary ltm-btn" onclick="verifyInputs()">
        <i class="fa fa-paper-plane"></i> &nbsp Submit
      </button>
    </div>
    <div class="col-sm-1"> </div>

  </div>
</div>
<div class="ltm-section-margin"></div>

script.js

function verifyInputs() {
  //Add all input elements to the input array
  let inputs = buildInputArray();
  inputs.push($("#number-of-adults")); //Add the dropdown
  let isValidForm = true;

  for (const i of inputs) {
    if (hasVal(i)) {
      setValid(i);
    } else {
      setInvalid(i);
      isValidForm = false;
      const inputName = getInputName(i);
      toastr.error("Please enter the " + inputName + " field!");

    }
  }
  const validCheckIn = verifyCheckIn();
  const validCheckOut = verifyCheckOut();
  if (!validCheckIn || !validCheckOut) {
    isValidForm = false;
  }
  
  if (isValidForm) {
    toastr.success("Form submitted!");
  }
}

function setValid(elements) {
  elements.removeClass("is-invalid").addClass("is-valid");
}
function setInvalid(element) {
  element.removeClass("is-valid").addClass("is-invalid");
}

//Clear button - removes values and validity colors
function clearAllInputs() {
  let inputs = buildInputArray();
  inputs.push($("#number-of-adults"));
  inputs.forEach((i) => {
    i.val("");
    i.removeClass("is-invalid").removeClass("is-valid");
  });
  //Handle special inputs
  $("#number-of-adults").val("-1").prop("selected", true);
  $("[name=priority-radios]").removeAttr("checked");
  $("#priority-radio-low").prop("checked", true);
  $("#num-of-days").val("Displays num of days...");
  $("#cost").val("Displays cost...");
  $("#range-slider").val("5");
  toastr.clear();
  toastr.info("All fields cleared");
}

/**
  Returns an array of all input elements
*/
function buildInputArray() {
  let inputs = [];
  let inputIterator = $(".form-control");
  inputIterator.each(function () {
    inputs.push($(this));
  });
  //Remove the read only inputs
  inputs = inputs.filter((i) => !i.hasClass("ltm-read-only"));
  return inputs;
}

//Returns a string representation of the input element based on its ID
function getInputName(input){
  let name = input.attr("id");
  name = name.replaceAll("-", " ");
  return name;
}

function hasVal(input) {
  //Check for date
  if (input.attr("type") === "date") {
    let date = new Date(input.val());
    //returns whether a date has been entered
    return !isNaN(date.getDate());
  }
  //For dropdown
  else if (input.prop("tagName").toLowerCase() === "select") {
    return input.val() > 0; //Default is -1
  } else {
    //For standard input field
    return Boolean(input.val());
  }
}

//Remove invalid color when user adds input
$(".form-control").change(function(){
  $(this).removeClass("is-invalid");
});

$(document).ready(function () {
  //Toastr options
  toastr.options = {
    closeButton: true,
    debug: false,
    newestOnTop: false,
    progressBar: false,
    positionClass: "toast-top-right",
    preventDuplicates: true,
    showDuration: "1000",
    hideDuration: "1000",
    timeOut: "5000",
    extendedTimeOut: "1000",
    showEasing: "swing",
    hideEasing: "linear",
    showMethod: "fadeIn",
    hideMethod: "fadeOut"
  };
});

//--------------------------------------
//For Scheduling
//--------------------------------------

//Display cost and num of days
$(".ltm-schedule").change(function () {
  //remove value for cost if no adults selected
  const hasAdults = hasVal($("#number-of-adults"));
  if (!hasAdults) { //If no value for adults, remove cost
      $("#cost").val("Displays cost...");
  }
  //if check in is present & check out is after check in
  if (!checkInIsInPast() &
      !checkOutIsBeforeCheckIn()){
    //calculate days
    const days = checkOutMoment().diff(checkInMoment(), "days");
    $("#num-of-days").val(days);
    
    if (hasAdults){
        //Calculate and display cost
        const cost = 150 * days * $("#number-of-adults").val();
        $("#cost").val("$" + cost);
    } 
  } else { //reset days if dates are not valid
    $("#num-of-days").val("Displays num of days...");
  }
  
});




//On changing check in, alert user if it is in the past
$("#check-in").change(function () {
  verifyCheckIn();
  //If the check out has been filled
  if ((checkOutMoment())){
    //verify that check out is not before new check in 
    verifyCheckOut();
  }
});
function verifyCheckIn() {
  if (!checkInMoment()) {
    //If no date has been entered
    return false;
  } else if (checkInIsInPast()) {
    toastr.error("Check-in cannot be in the past!");
    setInvalid($("#check-in"));
    return false;
  } else {
    $("#check-in").removeClass("is-invalid");
    return true;
  }
}

//On changing check out, alert user if check out is not after check in
$("#check-out").change(function () {
  verifyCheckOut();
});
function verifyCheckOut() {
  if (!checkOutMoment()) {
    //If no date has been entered
    return false;
  } else if (checkOutIsBeforeCheckIn()) {
    toastr.error("Check out must be after check in!");
    setInvalid($("#check-out"));
    return false;
  } else {
    $("#check-out").removeClass("is-invalid");
    return true;
  }
}

//Returns the check in date as a moment.js 
function checkInMoment() {
  if ($("#check-in").val() == "") {
    return undefined;
  }
  return moment(new Date($("#check-in").val()));
}
//Returns the check out date as a moment.js 
function checkOutMoment() {
  if ($("#check-out").val() == "") {
    return undefined;
  }
  return moment(new Date($("#check-out").val()));
}


function checkInIsInPast() {
  let checkIn = checkInMoment();
  if (!checkInMoment()) return true;
  let yesterday = moment().add(-1, "days");
  let inPast = (date) => date <= yesterday;
  return inPast(checkIn);
}

function checkOutIsBeforeCheckIn() {
  return checkOutMoment() <= checkInMoment();
}

function datesFilledOut(){
  return hasVal($("#check-in")) && hasVal($("#check-out"));
}

style.css

.ltm-info-textbox {
  font-size: 18px;
  background-color: #E1E1E1;
  margin: 15px 0px 15px 0px;
  padding: 10px 10px;
  border-style: solid;
  border-weight: 1px;
  border-color: grey;
  border-radius: 5px;
  
}
.ltm-section-margin {
  height: 15px;
}
.ltm-hidden-label {
  display: none;
}

/* Hide increment arrows */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.ltm-card-inner-spacer {
  margin-top: 15px;
}

.ltm-btn {
  max-width: 200px;
}
.ltm-deleteme {
  color: red;
}