Really easy registration form with JavaScript validation for Bootstrap

print
Easy to use registration form with some validation.

This works for me and the site I am using it on, some styling/tweaking may be required for others.

The HTML:

<form action="" method="post" id="fileForm" role="form">
    <fieldset>
      <div class="form-group">
        <label for="email"><span class="req">* </span> Email Address: </label>
        <input class="form-control" required type="text" name="email" id="email" onchange="email_validate(this.value);" />
        <div class="status" id="status"></div>
      </div>

      <div class="form-group">
        <label for="username"><span class="req">* </span> User name:</label>
        <input class="form-control" type="text" name="username" id="txt" minlength="6" onkeyup="Validate(this.value)" placeholder="minimum 6 letters" required autocomplete="off" />
        <div id="errLast"></div>
      </div>

      <div class="form-group">
        <label for="password"><span class="req">* </span> Password: </label>
        <input required name="password" type="password" class="form-control inputpass" minlength="4" maxlength="16" id="pass1" /> </p>

        <label for="password"><span class="req">* </span> Password Confirm: </label>
        <input required name="password" type="password" class="form-control inputpass" minlength="4" maxlength="16" placeholder="Enter again to validate" id="pass2" onkeyup="checkPass(); return false;" />
        <span id="confirmMessage" class="confirmMessage"></span>
      </div>

      <div class="form-group">

        <input type="checkbox" required name="terms" onchange="this.setCustomValidity(validity.valueMissing ? 'Please indicate that you accept the Terms and Conditions' : '');" id="field_terms">   <label for="terms">I agree with the <a href="terms.php" title="You may read our terms and conditions by clicking on this link">terms and conditions</a> for Registration.</label>
        <span class="req">* </span>
      </div>

      <div class="form-group">
        <input class="btn btn-success" type="submit" name="submit_reg" value="Register">
      </div>
    </fieldset>
  </form>
  <!-- ends register form -->

  <script type="text/javascript">
    document.getElementById("field_terms").setCustomValidity("Please indicate that you accept the Terms and Conditions");
  </script>

The JavaScript:

function checkPass()
{
    
    var pass1 = document.getElementById('pass1');
    var pass2 = document.getElementById('pass2');
   
    var message = document.getElementById('confirmMessage');
    
    var goodColor = "#66cc66";
    var badColor = "#ff6666";
    
    if(pass1.value == pass2.value){
        pass2.style.backgroundColor = goodColor;
        message.style.color = goodColor;
        message.innerHTML = "Passwords Match"
    }else{
        pass2.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "Passwords Do Not Match!"
    }
} 
function validatephone(phone) 
{
    var maintainplus = '';
    var numval = phone.value
    if ( numval.charAt(0)=='+' )
    {
        maintainplus = '';
    }
    curphonevar = numval.replace(/[\A-Za-z!"£$%^&,*+_={};:'@#~,.Š/<>?|`¬][]/g,'');
    phone.value = maintainplus + curphonevar;
    maintainplus = '';
    phone.focus;
}

function Validate(txt) {
    txt.value = txt.value.replace(/[^a-zA-Z-'nr.]+/g, '');
}

function email_validate(email)
{
var regMail = /^([_a-zA-Z0-9-]+)(.[_a-zA-Z0-9-]+)*@([a-zA-Z0-9-]+.)+([a-zA-Z]{2,3})$/;

    if(regMail.test(email) === false)
    {
    document.getElementById("status").innerHTML    = "<span class='warning'>Please enter a valid email address.</span>";
    }
    else
    {
    document.getElementById("status").innerHTML	= "<span class='valid'>Email address valid</span>";	
    }
}

function dob_validate(dob)
{
var regDOB = /^(d{1,2})[-/](d{1,2})[-/](d{4})$/;

    if(regDOB.test(dob) === false)
    {
    document.getElementById("statusDOB").innerHTML	= "<span class='warning'>DOB is only used to verify your age.</span>";
    }
    else
    {
    document.getElementById("statusDOB").innerHTML	= "<span class='valid'>Thanks, you have entered a valid DOB!</span>";	
    }
}

function add_validate(address)
{
var regAdd = /^(?=.*d)[a-zA-Zsd/]+$/;
  
    if(regAdd.test(address) === false)
    {
    document.getElementById("statusAdd").innerHTML	= "<span class='warning'>Address is not valid yet.</span>";
    }
    else
    {
    document.getElementById("statusAdd").innerHTML	= "<span class='valid'>Thanks, Address looks valid!</span>";	
    }
}

 

Share this post:
Related Posts
Centre a form using Bootstrap 4 native controls
Bootstrap modal background doesn’t disappear when modal closes

Leave a Comment