Jquery validation min and max length

Min length method:

Description: Makes the element require a given minimum length.

Return false if the element is

  • some kind of text input and its value is too short
  • a set of checkboxes that doesn’t have enough boxes checked
  • a select and doesn’t have enough options selected

Works with text inputs, selects and checkboxes.

Makes “field” required having at least 3 characters.

<!doctype html>
<html>
<head> 
<meta charset="utf-8"> 
<title>Makes "field" required having at least 3 characters.</title> 

<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css"> 
</head> 
<body> 
<form id="myform">
    <label for="field">Required, minimum length 3: </label> 
    <input type="text" class="left" id="field" name="field"> 
    <br/> 
    <input type="submit" value="Validate!"> 
</form> 
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> 
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
 
<script> 
// just for the demos, avoids form submit 

jQuery.validator.setDefaults({ 
    debug: true, 
    success: "valid" 
}); 

$( "#myform" ).validate({ 
    rules: { 
       field: { 
          required: true, 
          minlength: 3 
       } 
    } 
}); 
</script> 
</body>
</html>
Please follow and like us:
0

Optionally Remove the Gutter Padding from Columns

Optionally Remove the Gutter Padding from Columns

HTML:

<h1>CSS Helper for Gutterless <strong>Bootstrap 3</strong> Columns <i class="fa fa-heart"></i></h1>

<div class="container">
 <div class="row">
 <h2>With Gutter</h2>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 </div>
</div>

<div class="container">
 <div class="row no-gutter">
 <h2>Without Gutter</h2>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 </div>

</div>

CSS:

/*======================================
= NO GUTTER CODE =
======================================*/
.no-gutter > [class*='col-'] {
 padding-right:0;
 padding-left:0;
}

/*=========================================
= IGNORE - USED FOR LAYOUT =
=========================================*/
h1 { margin-bottom: 50px; }
h1, h2 { text-align: center; }
.container {
 background: #e3e3e3;
 margin-bottom: 20px;
 padding-bottom: 50px;
}
p {
 background: pink;
 margin: 0;
}
i {
 color: pink;
}

source: https://codepen.io/ncerminara/pen/hfvix/

Please follow and like us:
0