JS Formularüberprüfung findet nicht statt

Question

Wenn ich dieses Formular teste, funktioniert die Funktion validateJob korrekt, aber es scheint nichts in Bezug auf validateCheckbox oder validateEmail zu passieren. Ich bekomme keinen Fehler.

Für dieses Projekt brauche ich nicht das Formular, um wirklich etwas zu tun, aber validieren. Ich bin ein Anfänger, also hoffe ich, eine kleine Lösung zu finden, anstatt das, was ich bisher habe, komplett neu zu strukturieren.

Hier ist mein Skript:

<script type="text/javascript"> 
/* <![CDATA[ */ 
function validateForm(form){ 
    var validation = true; 
    validation &= validateJob(form); 
    validation &= validateEmail(form); 
    validation &= validateCheckbox(form); 
    return validation; 
} 
function validateJob(){ 
    var jobSelected=false; 

    for (var i=0; i<3; ++i) { 
     if (document.forms[0].job[i].checked == true) { 
     jobSelected=true; 
     break; 
     } 
    } 
    if (jobSelected == false) { 
     window.alert("You must select a job option."); 
     return false; 
    } 
    else { 
     return true; 
    } 
//function to check check box 
function validateCheckbox() { 
     var contactSelected = false; 
    if (document.forms[0].contact.checked==true) { 
     contactSelected=true; 
    } 
    if (contactSelected == false) { 
    window.alert("You must approve being contacted."); 
    return false; 
    } 
    else 
    return true; 
    } 
//end checkbox check 
} 

function trim(s) 
{ 
    return s.replace(/^\s+|\s+$/, ''); 
} 

function validateEmail() { 
    var error=""; 
    var tfld = trim(document.forms[0].email);      
//  value of field with whitespace trimmed off 
    var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ; 
    var illegalChars= /[\(\)\<\>\,\;\:\\\"\[\]]/ ; 

    if (document.forms[0].email.value == "") { 
     error = "You didn't enter an email address.\n"; 
    } else if (!emailFilter.test(tfld)) {    
//test email for illegal characters 
     error = "Please enter a valid email address.\n"; 
    } else if (document.forms[0].email.value.match(illegalChars)) { 
     error = "The email address contains illegal characters.\n"; 
    } 
    window.alert(error); 
} 

function confirmReset() { 
     return resetForm; 
} 

/* ]]> */ 
</script>  

Hier mein html ist:

<form onSubmit="return validateForm(this)"> 
    <p> <label for="name">Full name: </label> 
    <input type="text" name="fullname"></p> 
    <p> <label for="email">Email: </label> 
    <input type="text" name="email"></p> 

    <p> <label for="job">I am applying to be a: </label><br/> 
    <input type="radio" name="job">Waiter<br/> 
    <input type="radio" name="job">Line cook<br/> 
    <input type="radio" name="job">Other</p> 
    <p> <label for="contact">Yes, you may contact me </label> 
    <input type="checkbox" name="contact" ></p> 
    <input type="submit" value="Submit"> 
    <input type="reset" /></p> 
</form> 

Answer 1

Sie können required nutzen htmltitle Attribute, anpassen <label> Elemente Platzierung nach <input> Elementen; css:invalid, content, angrenzend Geschwister Selektors +

:not([type=radio]):invalid + [for]:after { 
 
    content:attr(title); 
 
} 
 

 
[type=radio]:invalid ~ [for]:after, [type=checkbox]:invalid ~ [for]:after { 
 
    content: attr(title); 
 
} 
 

 
:invalid + [for] { 
 
    color:red; 
 
    font-style:italic; 
 
}

<form> 
 
    <p> 
 
    Full name: 
 
     <input type="text" minlength="1" pattern="\w+" name="fullname" required /> 
 
    <label title="You must enter full name" for="name"></label> 
 
    </p> 
 
    <p> 
 
    Email: 
 
     <input type="text" name="email" required /> 
 
    <label title="Please enter a valid email address" for="email"></label> 
 
    </p> 
 

 
    <p> 
 
    I am applying to be a: 
 
    <br/> 
 
    <input type="radio" name="job" required />Waiter 
 
    <br/> 
 
    <input type="radio" name="job" />Line cook 
 
    <br/> 
 
    <input type="radio" name="job" />Other 
 
    <label title="You must select a job option." for="job"></label> 
 
    <p> 
 
    Yes, you may contact me 
 
    <input type="checkbox" name="contact" required /> 
 
    <label title="You must approve being contacted." for="contact"></label> 
 
    </p> 
 
    <p> 
 
    <input type="submit" value="Submit" /> 
 
    <input type="reset" /> 
 
    </p> 
 
</form>