JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://img.infocert.it/js/libphonenumber.js"></script>
<script src="https://img.infocert.it/js/intlTelInput.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<fieldset id="richiedi">
<form action="" method="POST" name="WebToLeadForm" method="POST" id="WebToLeadForm" class="form-horizontal col-md-11">
<input type="hidden" name="oid">
<p> </p>
<p><b>Per essere contattato da un commerciale</b>, compila il form sottostante. I campi richiesti sono obbligatori.
<br />
</p>
<div class="form-group">
<label class="col-md-3 control-label" for="first_name">Nome:</label>
<div class="col-md-9">
<input class="form-control" id="first_name" name="first_name" maxlength="40" tabindex="1" type="text"> <span class="glyphicons form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="last_name">Cognome:</label>
<div class="col-md-9">
<input class="form-control" id="last_name" name="last_name" maxlength="80" tabindex="2" type="text"> <span class="glyphicons form-control-feedback"></span>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label" for="company">Azienda:</label>
<div class="col-md-9">
<input class="form-control" id="company" name="company" maxlength="40" tabindex="3" type="text"> <span class="glyphicons form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<input type="hidden" name="city" value="">
<div class="form-group">
...
JavaScript
$(document).ready(function () {
$("#phone").intlTelInput({
//allowExtensions: true,
//autoFormat: false,
//autoHideDialCode: false,
autoPlaceholder: false,
defaultCountry: "it",
//ipinfoToken: "yolo",
//nationalMode: false,
//numberType: "MOBILE",
//onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
preferredCountries: ['it'],
utilsScript: "https://img.infocert.it/js/libphonenumber.js"
});
var telInput = $("#phone"),
errorMsg = $("#error-msg"),
validMsg = $("#valid-msg");
// on blur: validate
telInput.focusout(function () {
if ($.trim(telInput.val())) {
if (telInput.intlTelInput("isValidNumber")) {
validMsg.removeClass("hide");
} else {
telInput.addClass("error");
errorMsg.removeClass("hide");
validMsg.addClass("hide");
}
}
var numberType = $("#phone").intlTelInput("getNumberType");
if (numberType == intlTelInputUtils.numberType.MOBILE) {
// is a mobile number
$("#phone").attr('name', 'mobile');
} else {
$("#phone").attr('name', 'phone');
}
});
// on keydown: reset
telInput.keydown(function () {
telInput.removeClass("error");
errorMsg.addClass("hide");
validMsg.addClass("hide");
});
$("#text_message").focusout(function () {
$("#00Nw00000088clXEAQ").val($("#text_message").val())
})
jQuery.validator.addMethod('validatePhone', function () {
if ($("#phone").intlTelInput("isValidNumber")) {
return true;
} else {
return false;
}
}, "Numero non valido");
$("#WebToLeadForm").validate({
errorElement: 'small',
errorClass: 'help-block',
errorPlacement: function (error, element)...