-1
Actuellement, un utilisateur qui remplit les champs de saisie de mon formulaire est autorisé à cliquer sur le bouton Envoyer même s'il montre que les champs email et téléphone ne sont pas valides. Actuellement, mon code JavaScript est configuré de sorte que le bouton de soumission ne soit pas désactivé et permette à l'utilisateur de cliquer sur 'soumettre' aussi longtemps que s'il y a du texte dans les champs de saisie. Est-il possible que je puisse seulement permettre à l'utilisateur de cliquer sur soumettre si les informations correctes et valides sont fournies dans les champs de saisie. Si quelqu'un peut aider, je l'apprécierais vraiment. 
Formulaires - Ne permet pas à l'utilisateur de soumettre avec un téléphone et un email incorrects
--Aucun-- commerce intérieur Afficher Site Marketing Direct médias sociaux Autres
body {
color: #fff;
background-color: #f78e2a;
text-align: center;
}
form {
color: #fff;
background-color: #f78e2a;
text-align: center;
font-family: Lato;
}
* {
box-sizing: border-box;
}
.form-title {
font-size: 38px;
color: #fff;
font-family: "Lato";
letter-spacing: 70px;
}
input[type="tel"] {
width: 100%;
height: 85%;
padding: 10px;
background-color: #f9a558;
border: 1px solid #fff;
}
input[type="text"] {
width: 100%;
padding: 10px;
background-color: #f9a558;
border: 1px solid #fff;
}
input[type="text"]:focus {
background-color: #fff;
}
input[type="text"]:visited {
background-color: #fff;
}
input[type="tel"]:focus {
background-color: #fff;
}
input[type="tel"]:visited {
background-color: #fff;
}
.container {
display: flex;
flex-direction: column;
padding: 5px 0;
margin-left: 10%;
margin-right: 10%;
}
textarea {
width: 100%;
background-color: #f9a558;
border: 1px solid #fff;
}
textarea:focus {
background-color: #fff;
}
#co {
flex-basis: 100%;
max-width: 100%;
}
label:nth-last-child(-n+2) {
flex-basis: 100%;
max-width: 100%;
}
select,
label {
height: 50px;
width: 48%;
margin: 2% 1%;
text-align: left;
font-family: "Lato";
}
#sub {
border-radius: 6px;
width: 120px;
height: 35px;
text-transform: uppercase;
display: block;
margin-top: 10px;
}
button {
margin-top: 10px;
background-color: #B9B9B9;
color: #959595;
border-radius: 6px;
width: 120px;
height: 35px;
margin-left: 1%;
display: block;
}
button:focus {
background-color: #fff;
color: #f78e2a;
}
@media (max-width: 426px) {
label {
width: 98%;
}
}
@media (min-width: 426px) {
.container {
flex-direction: row;
flex-wrap: wrap;
align-self: flex-start;
}
}
label {
position: relative;
}
.fa {
position: absolute;
bottom: 0;
right: 0;
transform: translate(-50%, -5%);
opacity: 0;
transition: opacity .5s, color .5s;
}
[data-valid] .fa {
opacity: 1;
color: green;
}
[data-valid="valid"] .fa {
color: green;
}
[data-valid="error"] .fa {
color: red;
}
.error {
display: none;
color: red;
font-size: .7em;
position: absolute;
left: 10px;
top: 0;
transform: translateY(150%);
}
[data-valid="error"] .error {
display: block;
}
input#sub:not([disabled]){
background-color: #fff;
color: #F68D2E;;
}
function phoneNumber(phone) {
var phoneno = /^\d{9,11}$/;
console.log("PHONE: "+phoneno.test(phone));
return phoneno.test(phone);
}
$('input[type="tel"]').on('keyup', function() {
var $label = $(this).closest('label');
if ($(this).val().trim() != '') {
if ($(this).is('#phone')) {
if (phoneNumber($(this).val())) {
$label.attr('data-valid', 'valid');
$(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle");
} else {
$label.attr('data-valid', 'error');
console.log("this works");
$(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o");
}
} else {
$label.attr('data-valid', 'valid');
console.log("this works")
}
} else {
$label.removeAttr('data-valid');
console.log("this works")
}
});
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\[email protected]\"]+(\.[^<>()[\]\\.,;:\[email protected]\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
console.log("email: "+re.test(email));
return re.test(email);
}
$('input[type="text"]').on('keyup', function() {
var $label = $(this).closest('label');
if ($(this).val().trim() != '') {
if ($(this).is('#email')) {
if (validateEmail($(this).val())) {
$label.attr('data-valid', 'valid');
$(this).next("i").removeClass("fa-times-circle-o").addClass("fa-check-circle");
} else {
$label.attr('data-valid', 'error');
console.log("this works 1")
$(this).next("i").removeClass("fa-check-circle").addClass("fa-times-circle-o");
}
} else {
$label.attr('data-valid', 'valid');
console.log("this works 2");
}
} else {
$label.removeAttr('data-valid');
console.log("this works 3");
}
});
test = function() {
if ($("#first_name").val()
&& $("#last_name").val()
&& $("#email").val()
&& $("#phone").val()
&& $("#city").val()
&& $("#state").val()
&& $("#company").val()
&& $("#comments").val()) {
$("#sub").removeAttr("disabled");
}
}
validation HTML5 rend facile ... https: //developer.mozilla.org/en-US/docs/Learn/HTML/Forms/ Form_validation – epascarello