SDValidator

by Sam Fereday

HTML

<form>
  <input type="test" class="customa vchange vlength vnumerical" />
  <button>
  Submit
  </button>
</form>
<form>
  <input type="test" class="customb vchange vlength vtext" />
  <button>
  Submit
  </button>
</form>
<form>
  <input type="test" class="vchange vlength vtext" />
  <input type="test" class="vchange vlength vtext" />
  <button>
  Submit
  </button>
</form>

JavaScript

/*
How this could work:
- Find each form on the page, treat it as a separate entity.
- For each form, scan its input elements.
- If input element has any class names, or, perhaps a custom tag that matches the ruleset, then parse it.
- Return if the result is true or false, then perform a callback based on
either a positive or negative result.
- Ensure form is 'not' submitted when you do it.
- Have the ability to add your own custom rules, or, overwrite old ones?
// Config examples in classes (wip):
vchange: Input will trigger validation on change
vlength: Input will length check (how? would you set rules up in a config for this?)
vnumerical: Input will check if a number
vtext: Input will check if text
// Use ramda?
// Use moment js?
*/

// So far rules on cater for things like length. Stuff like is numerical or text is pretty much a global thing. We'll get to time later on of course.
// Default rules (no need for array)
var rules = {
	maxLength: 6,
  minLength: 1
}

// Custom rules (array), not yet implemented
var customRules = [
	{
  	for: "customa",
    rules: {
    	maxLength: 8,
      minLength: 2
    }
  }
]

// Helper stuff
function mguid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
    s4() + '-' + s4() + s4() + s4();
}

// This 'might' be best as just a static method of a ruleset class.
function ParseRuleset(type, element, formNode){

	var self = this;
	switch(type)
  {
  	// Input must validate on change (should trigger the validator method built within its class)
    case "vchange":
    	element.addEventListener("change", function(){
	      	formNode.validateElement(self.element); // ??? Pass?
      });
    break;
    // Input must validate taking length in to consideration
    case "vlength":
    
    break;
  	default:
    	console.log("Does not handle that type yet: ", type);
  }

}

function...