Simple Form validation Using Javascript and passing data to select option using Ajax XmlHttpRequert


HTML Markup

<div class="form-wrapper">
  <form id="signupform" name="myForm" action=" " onsubmit="return validateForm()" method="post" class="forms">
  
    <h3 class="form-title">Sign Up</h3>
    
    <div class="signup-form">

       <div class="form-group">
        <label class="control-label">Name</label>
        <input type="text" value="" class="form-control" name="name" onkeypress="error()" />
        <span class="bar"></span>
        <span id="errormsg" class="error"></span>
      </div>

       <div class="form-group">
        <label class="control-label gender-lbl">Gender</label>
        <div class="radio-wrap">
          <input type="radio" id="male" value="Male" name="gender" checked>
          <label for="male">Male</label>
          <input type="radio" id="female" value="Female" name="gender">
          <label for="female">Female</label>
        </div>
        <span id="errormsg1" class="error"></span>
      </div>

       <div class="form-group">
        <label class="control-label" for="dob">DOB</label>
        <input type="text" value="" class="form-control" name="dob" onkeypress="error()">
        <span class="bar"></span>
        <span id="errormsg2" class="error"></span>
      </div>

       <div class="form-group">
        <label class="control-label" for="username">User Name</label>
        <input type="text" value="" class="form-control" name="username" onkeypress="error()">
        <span class="bar"></span>
        <span id="errormsg3" class="error"></span>
      </div>

       <div class="form-group">
        <label class="control-label">Country</label>
        <select id="selectcountry" class="form-control"></select>
        <!--  <select id="selectNumber">
          <option>Choose a number</option>
        </select> -->
        <span id="errormsg4" class="error"></span>
      </div>

       <div class="form-group">
        <label class="control-label" for="email">Email</label>
        <input type="text" name="email" id="email" value="" class="form-control" name="email" onkeypress="error()">
        <span class="bar"></span>
        <span id="errormsg5" class="error"></span>
      </div>

       <div class="form-group">
        <label class="control-label">Password</label>
        <input type="password" value="" name="pswd" class="form-control" onkeypress="error()">
        <span class="bar"></span>
        <span id="errormsg6" class="error"></span>
      </div>

       <div class="form-group">
        <label class="control-label">Repeat Password</label>
        <input type="password" value="" name="cfrmpswd" class="form-control" onkeypress="error()">
        <span class="bar"></span>
        <span id="errormsg7" class="error"></span>
      </div>

       <div class="form-group">
        <div class="radio-wrap">
          <input type="checkbox" id="remember" name="check-group" checked>
          <label for="remember">Remember Me</label>
        </div>
      </div>

       <p class="terms-link">
        By creating an account you agree to our <a href="javascript:void(0)">Terms & Privacy.</a>
      </p>

       <div class="btn-wrap">
        <button class="btn btn-signup" type="submit" onclick="return validateForm()">Sign Up</button>
        <button class="btn btn-cancel" type="reset" onclick="resetform()">Cancel</button>
      </div>
      
    </div>
  </form>
</div>



Javascript 

<script>
  //function for passing data to select option using ajax request
  var xmlhttp = new XMLHttpRequest();
  var url = "https://api.myjson.com/bins/9ohkv";
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var myArr = JSON.parse(this.responseText);
      myFunction(myArr);
    }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();

  function myFunction(arr) {
    var out = "";
    var i;
    for (i = 0; i < arr.length; i++) {
      out += '<option value="' + arr[i].code + '">' +
        arr[i].name + '</option>';
    }
    document.getElementById("selectcountry").innerHTML = out;
  }

  // function for reaset input box on reset button click
  function resetform() {
    document.getElementById("signupform").reset();
  }

  // function for hide error massage when keypress on input box
  function error() {
    document.getElementById("errormsg").style.display = "none";
    document.getElementById("errormsg1").style.display = "none";
    document.getElementById("errormsg2").style.display = "none";
    document.getElementById("errormsg3").style.display = "none";
    document.getElementById("errormsg4").style.display = "none";
    document.getElementById("errormsg5").style.display = "none";
    document.getElementById("errormsg6").style.display = "none";
    document.getElementById("errormsg7").style.display = "none";
  }

  // function for form validation 
  function validateForm() {
    var dobpattern = /^(0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$/;
    var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
    var name = document.myForm.name.value;
    var dob = document.myForm.dob.value;
    var username = document.myForm.username.value;
    var email = document.myForm.email.value;
    var gender = document.myForm.gender.value;
    var password = document.myForm.pswd.value;
    var confirmPassword = document.myForm.cfrmpswd.value;

    if (name == "") {
      document.getElementById("errormsg").innerHTML = "Name must be filled out";
      document.getElementById("errormsg").style.display = "block";
      return false;
    } else if (dob == "") {
      document.getElementById("errormsg2").innerHTML = "Date of Birth must be filled out";
      document.getElementById("errormsg2").style.display = "block";
      return false;
    } else if (!dob.match(dobpattern)) {
      document.getElementById("errormsg2").innerHTML = "Invalid date format:" + " " + dob;
      document.getElementById("errormsg2").style.display = "block";
      return false;
    } else if (username == "") {
      document.getElementById("errormsg3").innerHTML = "User Name must be filled out";
      document.getElementById("errormsg3").style.display = "block";
      return false;
    } else if (email == "") {
      document.getElementById("errormsg5").innerHTML = "Email Id must be filled out";
      document.getElementById("errormsg5").style.display = "block";
      return false;
    } else if (!email.match(mailformat)) {
      document.getElementById("errormsg5").innerHTML = "Please provide a valid email address";
      document.getElementById("errormsg5").style.display = "block";
      return false;
    } else if (password == "") {
      document.getElementById("errormsg6").innerHTML = "Passwords enter.";
      document.getElementById("errormsg6").style.display = "block";
      return false;
    } else if (confirmPassword == "") {
      document.getElementById("errormsg7").innerHTML = "Repeate Passwords enter.";
      document.getElementById("errormsg7").style.display = "block";
      return false;
    } else if (password != confirmPassword) {
      document.getElementById("errormsg7").innerHTML = "Passwords do not match.";
      document.getElementById("errormsg7").style.display = "block";
      return false;
    }
  }

</script>


SASS

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');

 .form-wrapper {
  font-family: 'Roboto', sans-serif;
  box-sizing: border-box;
  box-shadow: 1px 1px 3px #adadad;
  -webkit-box-shadow: 1px 1px 3px #adadad;
  -moz-box-shadow: 1px 1px 3px #adadad;
  -ms-box-shadow: 1px 1px 3px #adadad;
  -o-box-shadow: 1px 1px 3px #adadad;
  background: #24323d;
  padding: 0 0 15px;
  width: 500px;
  margin: 0 auto;
  font-size: 14px;
  form {
    &.forms {
      .form-title {
          font-size: 20px;
          text-transform: uppercase;
          margin:0;
          text-align:center;
          color: #fff;
          font-weight: normal;
          background:#1ab188;
          padding:15px;
      }
      .signup-form {
        width:400px;
        margin:25px auto 0 auto;
        .form-group {
          position:relative;
          margin:0 auto 20px auto;
        
          .form-control {
            background: none;
            font-size: 16px;
            padding: 5px 0;
            display: block;
            width: 400px;
            border: none;
            border-radius: 0;
            border-bottom: 1px solid #a5abb7;
            /* height: 22px; */
            color: #a5abb7;
            &:focus {
              outline: none;
            }
            &:focus ~ .bar:before {
              width: 100%;
            }
          }
          span {
            &.error {
              background: #c51244;
              bottom: -41px;
              position: absolute;
              left: 0;
              z-index: 1;
              min-width: 100%;
              box-shadow: 0px 1px 5px 0px rgb(132, 9, 43);
              color: white;
              font-size:12px;
              display:none;
              padding:8px;
              &:before {
                content: '';
                position: absolute;
                width:0;
                height:0;
                border-left:8px solid transparent;
                border-right:8px solid transparent;
                border-bottom: 8px solid #c51244;
                top:-8px;
              }
            }
          }
          label {
            &.control-label {
              font-size: 14px;
              font-weight: normal;
              pointer-events: none;
              transition: 300ms ease all;
              color: #a5abb7;
              display:block;
            }
          }
          .radio-wrap {
            display:block;   
            padding:8px 0;
            margin-top:10px;
              input[type="radio"] {
              &:checked, &:not(:checked) {
                  position: absolute;
                  left: -9999px;
                  & + label {
                    position: relative;
                    padding-left: 28px;
                    cursor: pointer;
                    line-height: 20px;
                    display: inline-block;
                    color: #666;
                    margin-right: 15px;
                    &:before {
                      content: '';
                      position: absolute;
                      left: 0;
                      top: 0;
                      width: 16px;
                      height: 16px;
                      border: 1px solid #ddd;
                      border-radius: 100%;
                      background: #fff;
                    }
                    &:after {
                        content: '';
                        width: 12px;
                        height: 12px;
                        background: #1ab188;
                        position: absolute;
                        top: 3px;
                        left: 3px;
                        border-radius: 100%;
                        -webkit-transition: all 0.2s ease;
                        transition: all 0.2s ease;
                    }
                 }
              }
              &:not(:checked) {
                & + label {
                  &:after {
                    opacity: 0;
                    -webkit-transform: scale(0);
                    transform: scale(0);
                  }
                }
              }
              &:checked {
                & + label {
                  color: #a5abb7;
                  &:after {
                      opacity: 1;
                      -webkit-transform: scale(1);
                      transform: scale(1);
                  }
                }
              }
            }
            input[type="checkbox"] {
              &:checked, &:not(:checked) {
                  position: absolute;
                  /* left: -9999px; */
                  & + label {
                    position: relative;
                    padding-left: 28px;
                    cursor: pointer;
                    line-height: 20px;
                    display: inline-block;
                    color: #666;
                    &:before {
                      content: '';
                      position: absolute;
                      left: 0;
                      top: 0;
                      width: 18px;
                      height: 18px;
                      border: 1px solid #ddd;
                      background: #fff;
                    }
                    &:after {
                        content: '\2713';
                        width: 18px;
                        height: 18px;
                        position: absolute;
                        top: 0;
                        left: 0; 
                       -webkit-transition: all 0.2s ease;
                        transition: all 0.2s ease; 
                        text-align: center;
                        margin: auto;
                        color: white;
                        font-weight: 600;
                        background: #1ab188;
                        border: 1px solid #1ab188;
                    }
                 }
              }
              &:not(:checked) {
                & + label {
                  &:after {
                    opacity: 0;
                  }
                }
              }
              &:checked {
                & + label {
                  color: #a5abb7;
                  &:after {
                      opacity: 1;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .terms-link {
    color: #a5abb7;
    font-size: 14px;
    a {
      text-decoration: none;
      color: #a5abb7;
      &:hover {
        color: #FFF;
      }
    }
  }
}
.bar {
  position: relative;
  display: block;
  width:100%;
   &:before {
    content: '';
    height: 2px;
    width: 0;
    bottom: 0px;
    position: absolute;
    background: #1ab188;
    transition: 300ms ease all;
    left: 0%;
  }
}

 .btn-wrap {
  margin:20px 0 10px 0;
  .btn {
    margin-right: 10px;
    padding: 10px 15px;
    border:none;
    display:inline-block;
    cursor:pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    &:hover {
       box-shadow: 0 7px 14px rgba(0, 0, 0, 0.18), 0 5px 5px rgba(0, 0, 0, 0.12);
    }
    &.btn-signup {
      background: #1ab188;
      text-transform: uppercase;
      color:#fff;
      &:hover {
        background: darken(#1ab188, 5%);
      }
    }
    &.btn-cancel {
      background: #eee;
      text-transform: uppercase;
      color:#424242;
      &:hover {
        background: darken(#eee, 5%);
      }
    }
  }

}








Comments

Post a Comment

Popular posts from this blog

Fetching data from external JSON file on after the another using Jquery with dynamic backgorund color generator

Fetching data from external JSON file on after the another using Jquery with dynamic background color generator For checking the out of the code :  Output Link Jquery  Explanation $.getJSON( "https://api.myjson.com/bins/14pvyv", function(obj) {       $.each(obj, function(key, value, i) {              $("ul").append("<li><span class='title'>"  +value.empName + "</span> " + "<span>"               +value.designation+ "</span>" + "<span>" + value.joiningdate  +"</span>"  + "                    <span class='age'>"+ value.age + "</span></li>"); }); Once document is loaded on the browser, I invoked "$.getJSON" method. after invoking method, the first parameter are passing is the URL of the json file and then callback function.    T...
Read more