JSフォームの検証が行われない

Question

このフォームをテストすると、関数validateJobは正しく動作しますが、validateCheckboxまたはvalidateEmailに関しては何も起こっていないようです。私は間違いがない。

このプロジェクトでは、実際に何かを実行して検証する必要はありません。私は初心者なので、これまでに得たものを完全に再構築するのではなく、小さな修正を見つけることを望んでいます。ここで

は私のスクリプトです：ここでは

<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>  

は私のhtmlです：

<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

あなたは<input>要素の後に<label>要素の配置を調整し、htmlrequired、title属性を利用することができます。 css:invalid、content、隣接兄弟セレクタ+

: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>