README.md

Online demo

Very simple and fast regex based form validator for Bootstap3. Also, you can use it without boostrap. It work perfect with Chrome, Firefox IE7+, and mobile browsers. It can also use HTML5 form fallback if javascript does not work (disabled).

How to use (with bootstrap)

###CSS <style> form .alert, form .process { display: none; } </style>

###HTML

Sample:

Email:

Select Select one item please Item1 Item2

Accept?

Please wait...

		</div>
		<div class="alert alert-success">
			Sent!
		</div>
		<div class="form-group text-center">
			<button class="btn btn-default" type="submit">Submit</button>
		</div>
	</fieldset>
</form>

###script <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="bootstrap.validator.js"></script> <script> // selector can be 'form' $(selector).bootstrap3Validate(function(e, data) { e.preventDefault();

	var self = $(this);

	$('.process', self).show();
	$("[type='submit']", self).hide();
	$(".alert-danger", self).hide();

	$.ajax({
		url: self.attr('action'),
		data: data,
		type: self.attr('method'),
	})
	.done(function() {
		self[0].reset(); // Clear form
	})
	.fail(function() {
		$('.alert-danger', self).text('Error!').show();
	})
	.always(function() {
		$('.process', self).hide();
		$("[type='submit']", self).show();
	});
})
</script>

---

Use it without bootstrap

###HTML <input name="name" type="text"

	data-title="This is a message show after validation failed"
	data-regex="REGEX"
	data-require=""
	data-equals="name_of_the_second_field"
/>

###Javascript $(selector).validate({ init: function() {

	},
	success: function() {

	},
	fail: function(invalids) {

	}
})

data-title:

Error description. With $(invalids[i]).attr('data-title') you can get it. For bootstrap3Validate just put it there you don't need to do anything

data-regex:

Validation regex. You can also put 'email' and 'tel'. Examples:

^[a-z]{1,10}$

Means all a-z and length should be 1~10

^[0-9]{2}$

Means just numbers between 10~99

You can find thousand of sample regex by Goolging.

required:

required or not

data-equals:

To check value of 2 field are same or not. Just add it to first one.