Validador de formularios conciso en Vanilla JavaScript-formvalidatorjs

Vista prévia

Descripción

formvalidatorjs es un validador de forma ligero y discreto escrito en JavaScript Vanilla que funciona con la validación nativa de datos HTML5.

Funcionamiento

Inserte el archivo JavaScript Validator-Standalone. js en su página web.

<script src="validator-standalone.js"></script>

Especifique los mensajes de error personalizados en el atributo Data-error-Text :

<form name="myForm" autocomplete="off" novalidate>


<div class="form-input-wrap">


<label for="myInput1">Text Field (not required)</label>


<input type="text" name="myInput1" id="myInput" class="input" />

</div>



<div class="form-input-wrap">


<label for="myInput2">Text Field (required, no error text)</label>


<input type="text" name="myInput2" id="myInput2" class="input" required />

</div>


<div class="form-input-wrap">


<label for="myInput3">Text Field (required, error text)</label>


<input type="text" name="myInput3" id="myInput3" class="input" data-error-text="Error text custom to this field" required />

</div>


<div class="form-input-wrap">


<label for="myInput4">Email Field</label>


<input type="email" name="myInput4" id="myInput4" class="input" data-error-text="Please enter a valid email address" required />

</div>


<div class="form-input-wrap form-input-wrap--select">


<label for="myInput5">Select Field</label>


<select name="myInput5" id="myInput5" class="input" data-error-text="Please select an option" required>



<option value="">Choose an option</option>



<option value="Option 1">Option 1</option>



<option value="Option 2">Option 2</option>



<option value="Option 3">Option 3</option>



<option value="Option 4">Option 4</option>



<option value="Option 5">Option 5</option>


</select>

</div>


<div class="centered">


<input type="submit" value="Submit" class="button" />

</div>

</form>

Inicialice el formulario validatior y valide los campos de formulario al enviar.

const myForm = document.querySelector("form[name=myForm]");

myForm.addEventListener("submit", function(event) {


if(validator.checkForm(event.target)) {


alert("Continue processing the form!");

}


event.preventDefault();
});

Configuración predeterminada.

{

errored_input_classname: "errored",

error_text_classname: "input-error",

error_text_data_attribute: "data-error-text"
}

Registro de cambios

03/08/2019

• Mejorado Regex de correo electrónico para permitir más direcciones de correo electrónico válidas