Example

  1. Fill out the form below.
  2. Display Name length needs to be between 3-30 characters.
  3. Email has to be correct format.
  4. Passwords have to match.
  5. Uses ajax to check ifbinput value can be used.
    Use cases:
    • Check if email is already found.
    • Check if post name is already found.
    • ect...

Register Below

https://
.exam.ple
Examples are cool

Simple Example

Code

<form class="jw3b-form">
<div class="mb-3">
  <label for="example" class="form-label">Username</label>
  <input type="text" class="form-control mf-valid" id="example"
    placeholder="Type A Name" required
        minlength="4" maxlength="30" pattern="[a-z]{4,30}"
    data-error-msg="Username must be lowercase between 4-30 characters long.">
  <div class="form-text mb-3" id="example-valid"></div>
</div>
<form>

Notice the html attributes minlength, maxlength and pattern? That literally does the trick here for validating.

Ensure the input element has an id that matches the beginning of the form-text div after the element, with -valid added to that div. This is the element that will display the error message when the form element does not validate.

Full Code

<form role="form" id="register-form" action="javascript:void(0);" method="post"
	class="jw3b-form border rounded bg-dark-subtle p-4 p-md-3 border-primary-subtle">
	<h4 class="border-bottom border-primary mb-3">Register Below</h4>
	<div class="input-group">
		<span class="input-group-text"><i class="bi bi-person-fill"></i></span>
		<div class="floating-label">
			<input id="mf-rname" name="mf-rname" value="" class="mf-valid form-control" required
				placeholder="Display Name" minlength="3" maxlength="30"
				data-error-msg="Display name has to be at between 3-30 characters long" type="text">
			<label for="mf-rname">Display Name</label>
		</div>
	</div>
	<div class="form-text mb-3" id="mf-rname-valid"></div>
	<div class="input-group">
		<span class="input-group-text"><i class="bi bi-envelope-fill"></i></span>
		<div class="floating-label">
			<input id="mf-remail" name="mf-remail" value="" class="mf-valid form-control" required type="email"
				placeholder="your@email.com" data-error-msg="Please enter a valid email address."
				data-mf-ajax-check="email" data-mf-ajax-url="email.json">
			<label for="mf-remail">your@email.com</label>
		</div>
	</div>
	<div class="form-text mb-3" id="mf-remail-valid"></div>
	<div class="input-group">
		<span class="input-group-text"><i class="bi bi-key-fill"></i></span>
		<div class="floating-label">
			<input id="mf-rpass" name="mf-rpass" value="" class="mf-valid form-control" required
				placeholder="Password" type="password" minlength="6" data-mf-same-as="#mf-rpass2"
				data-error-msg="Min 6 characters or passwords are not the same.">
			<label for="mf-rpass">Password</label>
		</div>
	</div>
	<div class="form-text mb-3" id="mf-rpass-valid"></div>
	<div class="input-group">
		<span class="input-group-text"><i class="bi bi-key-fill"></i></span>
		<div class="floating-label ">
			<input id="mf-rpass2" name="mf-rpass2" value="" class="mf-valid form-control" required
				placeholder="Confirm Password" type="password" minlength="6" data-mf-same-as="#mf-rpass"
				data-error-msg="Min 6 characters or passwords are not the same.">
			<label for="mf-rpass2">Confirm Password</label>
		</div>
	</div>
	<div class="form-text mb-3" id="mf-rpass2-valid"></div>
	<div class="input-group">
		<span class="input-group-text"><i class="bi bi-globe-americas"></i></span>
		<span class="input-group-text">https://</span>
		<div class="floating-label ">
			<input id="mf-rweb" name="mf-rweb" value="" class="mf-valid form-control" required placeholder="Website"
				minlength="4" data-mf-ajax-url="website-url.json" data-mf-ajax-check="website-url"
				data-error-msg="4 characters long min." type="text">
			<label for="mf-rweb">Website</label>
		</div>
		<span class="input-group-text">.exam.ple</span>
	</div>
	<div class="form-text" id="mf-rweb-valid"></div>
	<div class="form-text mb-3">Examples are cool</div>
	<div class=" checkbox mb-3">
		<label for="mf-rterms">
			<input id="mf-rterms" name="mf-rterms" value="1" type="checkbox">
			By clicking Register, you agree to the terms of use.
		</label>
	</div>
	<div id="register-form-results"></div>
	<input type="hidden" name="form_id" value="register-form" id="form-id-register-form">
	<hr>
	<div class="text-center clearfix">
		<button id="register-form-btn" class="w-100 btn btn-lg btn-primary" type="submit">
			<i class="bi bi-check-lg"></i> Register
		</button>
	</div>
</form>

How to use

Add the javascript file to your page.

<script src="mf-valid.js"></script>

Add required to your form elements.

Add mf-valid class to your form elements class you want the validator to check.

Add data-* to the form elements

Attribute Required Example Value Explain Value
data-error-msg no Input is not correct, try again The value will be the error message shown under the element that is invalid.
data-mf-ajax-url no /ajax.php The URL to send the post data and check if the value of this element is useable or of correct backend format.
data-mf-ajax-check yes, if data-mf-ajax-url is found, this attribute must be found also. email This is the key to check against in your backend script.
email=${input.value} would be sent to the server via a fetch post.
data-mf-same-as no #password2 Example usage is to ensure 2 password fields have the same value.

Frequently Asked Questions

NO!

YES! MIT License, do as you want, just dont hold me liable for any misuse you may come across. Its your job as a developer to ensure no security issues may arise.

I did some testing with <select> tags, but was unable to get the validation to pop up in the native browser validation. I do plan on tweaking this more to ensure it does work with select tags as well.

I have not done any testing with <textarea> tags, but I'm sure if you added the maxlength or min length to the <textarea> tag it will work.

Because if you look at the top example, I'm using input-groups and custom floating labels, so fimding the correct parent element would be complicated depending on the setup. So I opt'd for just putting the <div> with the mb-3 where the error notice should go.

Because I found an awesome tkrotoff/bootstrap-floating-label plugin and I prefer this technique way more than bootstrap's native floating labels. Thank you tkrotoff for sharing your project!

About Me.

Sup, Yohn here, I wanted a simple way to validate my forms using data-* attributes, and everything I've found online had so much extra markup, and unneeded code, that truly is amazing for what they are and what they can accomplish, but way to bloated for what I was looking for.

So I spent a few hours playing around with native browser validation and came up with this approach to validate forms. Yes, it could have been wrapped a class, and made easier, but really, its not that much code to go along with it, so I figured this would be the best way to have it.

I also included some ajax / fetch functions that I use for submiting forms, works with multiple uploads and normal forms, or if you just wanted to do some quick ajax checks (like check if email has been used before in signup process).