La validation de formulaire ne s'affiche pas

Question

J'essaie d'utiliser du code provenant d'un exemple de validation de formulaire et de l'adapter à mon propre formulaire, mais cela ne semble pas fonctionner. Il y a un message qui est supposé apparaître lorsqu'un utilisateur entre un nom, un numéro de téléphone ou un e-mail incorrectement, par exemple "veuillez entrer un nom valide". Je ne comprends pas bien javascript alors je me bats pour essayer de trouver le problème. Il n'y a pas de problèmes de console si cela aide probablement à un problème de nommage?

jsFiddle

HTML

<form> 
    <div class="formColumn2"> 

    <label for="name"> 
    <span class="textStyle">Full Name*</span><input type="text" id="name"><br> 
    <span id="nameMessage" class="message">You must have a valid name</span> 
    </label> 

    <label for="email"><span class="textStyle">Email*</span> 
    <input type="text" id="email"><br> 
    <span id="emailMessage" class="message">You must have a valid email</span> 
    </label> 

    <label for="phoneNumber"> 
    <span class="textStyle">Phone Number*</span> 
    <input type="text" id="phoneNumber"><br> 
    <span id="phoneMessage" class="message">You must have a valid phone number</span> 
    </label> 

     <input type="submit" id="submit" value="Submit"> 

</div> 
    </form> 

CSS

.textStyle { 
width: 150px; 
display: inline-block; 
} 

.formColumn2 { 
margin-top:-80px; 
margin-left: 50px; 
} 

select{ 
width:200px; 
margin:10px 0; 
} 


input[type=text], 
input[type=password]{ 
width:200px; 
margin:10px 0; 
} 


.message{ 
display: none; 
} 

input[type=submit]{ 
background: #fff; 
border: 1px solid black; 
cursor: pointer; 
} 

input[type=text].error, 
input[type=password].error{ 
border: 3px solid red; 
color: red; 
} 

Javascript

var nameInput = document.querySelector('#name'); 
var emailInput = document.querySelector('#email'); 
var phoneInput = document.querySelector ('#phoneNumber'); 

function displayError(fieldname, message) { 
    var input_field = document.querySelector('#' + fieldname); 
    var error_box = document.querySelector('#' + fieldname + 'Message'); 

    addClass (input_field, 'error'); 

    error_box.style.display = 'block'; 
    error_box.innerHTML = message; 

} 

function hideError(fieldname){ 
    var input_field = document.querySelector('#'+fieldname); 
    var error_box = document.querySelector('#'+fieldname+'Message'); 
    removeClass (input_field, 'error'); 
    error_box.style.display = 'none'; 
} 

function addClass(html_element,class_str) { 
    if(html_element.className.indexOf(class_str) == -1){ 
     html_element.className += ' '+class_str; 
    } 
} 

function removeClass(html_element, class_str){ 
    if(html_element.className.indexOf(class_str) != -1){ 
     html_element.className = html_element.className.replace(class_str, ''); 
    } 
} 

nameInput.onblur = function(){ 
    if(!nameInput.value){ 
     valid = false; 
     displayError('name', 'Please enter your name'); 
    }else if(!isValidName(nameInput.value)){ 
     valid = false; 
     displayError('name', 'That name has invalid characters'); 
    }else{ 
     hideError('name'); 
    } 

    emailInput.onblur = function(){ 
    if(!emailInput.value){ 
     valid = false; 
     displayError('email', 'Please enter your email'); 
    }else if(!isValidEmail(emailInput.value)){ 
     valid = false; 
     displayError('email', 'The email field is invalid'); 
    }else{ 
     hideError('email'); 
    } 
} 

phoneInput.onblur = function(){ 
    if(!emailInput.value){ 
     valid = false; 
     displayError('phone', 'Please enter your number'); 
    }else if(!isValidEmail(emailInput.value)){ 
     valid = false; 
     displayError('email', 'The phone number field is invalid'); 
    }else{ 
     hideError('phone'); 
    } 
} 

submitButton.onclick = function(){ 

    var valid = true; 

    return valid; 
} 

function isValidName(str){ 
    var namePattern = new RegExp('^[a-zA-Z \s\'-]{1,}$'); 

    return namePattern.test(str); 
} 

function isValidEmail(str) { 
    var emailPattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[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,}))$/; 
    return emailPattern.test(str); 
} 

Answer 1

Si vous utilisez jQuery, ce sera moins compliqué.

si vous devez utiliser

$('.formClass').validate(); 

et en html vient de mettre required dans les champs de texte, que vous voulez qu'ils ne soient vides.

<form class="formCLass"> 
    <input type="text" name="username" required/> 
     <input type="email" name="email" required/> 
</form>