JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.finsicilia.it/iscrizioni/bootstrap/js/bootstrapValidator.min.js"></script>
<link rel="stylesheet" href="http://www.finsicilia.it/iscrizioni/bootstrap/css/bootstrapValidator.min.css">
<script src="http://www.finsicilia.it/iscrizioni/bootstrap/js/select2.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://www.finsicilia.it/iscrizioni/bootstrap/css/select2.css">
<link rel="stylesheet" href="http://www.finsicilia.it/iscrizioni/css/nprogress.css">
<script src="http://www.finsicilia.it/iscrizioni/js/nprogress.js"></script>
<script src="http://www.finsicilia.it/iscrizioni/js/application.js"></script>
<div class="modal fade" id="controlloMail" data-backdrop="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <h4>Verifica Recapiti</h4>
	            </div>
	            <div class="modal-body">Al fine di permettere la buona diffusione di informazioni relative alle iscrizioni, ti chiediamo di verificare ed eventualmente correggere i dati di contatto in nostro possesso relativi all'utente principale di questa societ&agrave;.<br>Se sono stati inseriti utenti secondari, loro stessi avranno la possibilit&agrave; di verificare e correggere i loro dati.<br><br>
		            <form id="contact-form">
		            	<div class="form-group">
				            <label class="label label-info" for="mail1">Email Primaria</label>
                            <input type="email" name="mail1" id="mail1" class="form-control" value=""/>
		            	</div>
						<div class="form-group">
				            <label class="label label-info" for="mail2">Email Secondaria (facoltativo)</label>
                            <input type="email" name="mail2" id="mail2" class="form-control" value=""/>
						</div>
			            <div class="form-group">
				            <label class="label label-info"...

JavaScript

$(document).ready(function(){
				$("#cell").keypress(function (e) {
				    //if the letter is not digit then display error and don't type anything
				    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
				        	return false;
				    }
			    });
			    
    
				$("#gestioneRecapiti").click(function(){
					$('#controlloMail').modal({
					  backdrop: 'static',
					  keyboard: false
					});
				});
				
				$('#controlloMail').modal({
				  backdrop: 'static',
				  keyboard: false
				});
				
				
				$('#contact-form').bootstrapValidator({
						excluded: [':disabled'],
				        feedbackIcons: {
				            valid: 'glyphicon glyphicon-ok',
				            invalid: 'glyphicon glyphicon-remove',
				            validating: 'glyphicon glyphicon-refresh'
				        },
				        fields: {
				            mail1: {
				                //message: 'Indirizzo email non valido',
				                validators: {
				                    notEmpty: {
				                        message: 'Email richiesta e non pu&ograve; essere vuoto.'
				                    },
				                    emailAddress: {
				                        message: 'Non &egrave; un indirizzo email valido.'
				                    }
				                }
				            },
				            cell: {
				                validators: {
				                    notEmpty: {
				                        message: 'Numero di cellulare richiesto e non pu&ograve; essere vuoto.'
				                    }
				                }
				            },
				            nome: {
				                validators: {
				                    notEmpty: {
				                        message: 'Nome titolare richiesto e non pu&ograve; essere vuoto.'
				                    },
				                    stringLength: {
				                        min: 3,
				                        max: 30,
				                        message: 'Il nome deve contenere almeno 6 caretteri.'
				                    },
				 ...