JSFiddle

  • jQuery Validation Unobtrusive #5 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    $("#Name").on('change blur',function(e){
    debugger;
    	console.log(this.name + ' ' + e.type + 'ed');
      $("#myForm").data('validator').element('#Name');
    });
    
    $("input ...
  • Deep Clone Array

    No-Library (pure JS), HTML, CSS, JavaScript

    var originalArray = [
    	{name: 'Ted', age: 32},
      {name: 'Bob', age: 54}
    ]
    
    var clonedArray = JSON.parse(JSON.stringify(originalArray))
    
    console.log(originalArray ...
  • String to Date #3 is the latest revision

    No-Library (pure JS), HTML, CSS, JavaScript

    var a = new Date(2011,11,30);
    var b = Date.parse('11/30/2011');
    
    console.log(typeof a) // object (date ...
  • Stack Fixed Bottom

    No-Library (pure JS), HTML, CSS, JavaScript

    <div class="bottom-ish">Bottom-Ish</div>
    <div class="bottom-est">Bottom-Est</div>
  • Dates Equal

    No-Library (pure JS), HTML, CSS, JavaScript

    var a,b,equal
    
    a = new Date(1995,11,17);
    b = new Date(1995,11,17);
    equal = a.getTime() === b ...
  • jQuery Any #3 is the latest revision

    jQuery 2.2.4, HTML, CSS, JavaScript

    jQuery.fn.any = function(filter){ 
    	for (i=0 ; i<this.length ; i++) {
      	 if (filter.call(this[i])) return true;
      }
      return ...
  • Required Field Validation

    No-Library (pure JS), HTML, CSS, JavaScript

    <table>
      <thead>
        <tr>
          <th>State</th>
          <th>Opt A</th>
          <th>Opt B <span class="required">*</span></th>
          <th>Opt C</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Initial</td>
          <td>
              <label for="">Name:</label>
              <input type="text"><br/>
              <span class="val-msg"></span>
          </td>
          <td>
              <label for="">Name<span class="required">*</span>:</label>
              <input type="text"><br/>
              <span class="val-msg"></span>
          </td>
          <td>
              <label for="">Name:</label>
              <input type="text"><br/>
              <span class="val-msg"></span>
          </td>
        </tr>
    
        <tr>
          <td>Dirty - Invalid</td>
          <td>
              <label for="">Name:</label>
              <input type="text" class="invalid"><br/>
              <span class="val-msg">Name field is required</span>
          </td>
          <td>
              <label for="">Name<span class="required">*</span>:</label>
              <input type="text" class="invalid"><br/>
              <span class="val-msg">Name ...</span></br/></td></tr></tbody></table>
  • Checkbox List

    No-Library (pure JS), HTML, CSS, JavaScript

    <form action="">
    
      <div>
        <input type="checkbox" name="Fruits[0].Selected" value="A" id="A"/>
        <input type="hidden" name="Fruits[0].Value" value="A"/>
        <label for="A" >A</label>
      </div>
      <div>
        <input type="checkbox" name="Fruits[1].Selected" value="B" id="B"/>
        <input type="hidden" name="Fruits[1].Value" value="B"/>
        <label for="B" >B</label>
      </div>  
      <div>
        <input type="checkbox" name="Fruits[2].Selected" value="C" id="C"/>
        <input type="hidden" name="Fruits[2].Value" value="C"/>
        <label for="C" >C</label>
      </div>
    
      <input type="submit" value="Submit" />
      
    </form>
    
    
    
    
    <div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
        About this SO question:
        <a href='http://stackoverflow.com/q/37778489/1366033'>
            How to make Check Box List in ASP.Net MVC
        </a>
    </div>
  • select multiple w/o Ctrl

    jQuery 1.7.1, HTML, CSS, JavaScript

    $('select[multiple] option').mousedown(function(e) {
        e.preventDefault();
        this.selected = !this.selected;
        return false;
    });
  • HTML Select Options

    No-Library (pure JS), HTML, CSS, JavaScript

    <h3>Single Select</h3>
    <select>
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
    
    <h3>Multi Select</h3>
    <select multiple="multiple">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="C">C</option>
    </select>
    
    
    
    <!-- Post Info -->
    <div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
        Further Reading:
        <a href='https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select'>
            MDN - <code>&lt;select&gt;</code>
        </a>
    </div>