Contact Form

by Roberts

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<script src="//s.codepen.io/assets/libs/modernizr.js"></script>
<div class="container">

    <form class="well form-horizontal" action=" " method="post"  id="contact_form">
<fieldset>

<!-- Form Name -->
<legend>
  Veidlapa preces pasūtīšanai
  <h5>Aizpildiet nepieciešamos lauciņus, kas apzīmēti ar * (sarkanu zvaigznīti).</h5>
</legend>

<!-- Text input-->

<div class="form-group">
  <label class="col-md-4 control-label">Vārds</label>  
  <div class="col-md-4 inputGroupContainer">
  <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
  <input  name="first_name" placeholder="Jūsu vārds .." class="form-control"  type="text">
    </div>
  </div>
</div>

<!-- Text input-->
       <div class="form-group">
  <label class="col-md-4 control-label">E-pasts</label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
  <input name="email" placeholder="Jūsu e-pasta adrese .." class="form-control"  type="text">
    </div>
  </div>
</div>


<!-- Text input-->
       
<div class="form-group">
  <label class="col-md-4 control-label">Telefona numurs </label>  
    <div class="col-md-4 inputGroupContainer">
    <div class="input-group">
        <span class="input-group-addon"><i class="glyphicon...

CSS

#success_message{ display: none;}

JavaScript

$(document).ready(function() {
    $('#contact_form').bootstrapValidator({
        // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            first_name: {
                validators: {
                        stringLength: {
                        min: 3,
                        message: ' '
                    },
                        notEmpty: {
                        message: 'Lūdzu, ievadiet savu vārdu!'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: 'Lūdzu, ievadiet savu e-pasta adresi!'
                    },
                    emailAddress: {
                        message: 'Lūdzu, ievadiet savu e-pasta adresi korekti!'
                    }
                }
            },
            phone: {
                validators: {
               			stringLength: {
                        min: 8
                    },
                    notEmpty: {
                        message: 'Lūdzu, ievadiet savu telefona numuru!'
                    },
                    phone: {
                   			country: 'Latvia',
                        message: 'Lūdzu, ievadiet savu telefona numuru korekti!'
                    }
                }
            },
            address: {
                validators: {
                     stringLength: {
                        min: 8,
                    }
                }
            },
            year: {
                validators: {
                    number: true,
                    message: 'Ievadiet tikai ciparus!'
                }
            },
            comment: {
                validators: {
                      stringLength: {
                        min: 10,
 ...