驗證輸入比關閉div一旦填寫

Question

我真的很新的HTML，JavaScript，只是想知道如何檢查我的fieldset內的輸入字段是否由用戶完成，如果是這樣fieldset崩潰到它的傳說。下面我創建了腳本將fieldset摺疊到圖例中，我只需創建驗證腳本，但我不知道如何創建它。

function doit2() { 
 
    if (document.getElementById('two').style.display == 'none') { 
 
    document.getElementById('two').style.display = 'block'; 
 
    } else { 
 
    document.getElementById('two').style.display = 'none'; 
 
    } 
 
}

<fieldset> 
 
    <legend><a href="#" onclick="doit2()">Personal details</a></legend> 
 
    <div id="two"> 
 
    <div> 
 
     <label>Surname or family name:</label> 
 
     <input type="text" name="personal" /> 
 
    </div> 
 
    <div> 
 
     <label>Given name/names:</label> 
 
     <input type="text" name="personal" /> 
 
    </div> 
 
    <div> 
 
     <label> Date of birth:</label> 
 
     <input type="date" name="personal" /> 
 
    </div> 
 
    <div> 
 
     <label> Male </label> 
 
     <input type="radio" name="gender" value="Male" /> 
 
    </div> 
 
    <div> 
 
     <label> Female </label> 
 
     <input type="radio" name="gender" value="Female" /> 
 
    </div> 
 
    <div> 
 
     <label> N/A </label> 
 
     <input type="radio" name="gender" value="NA" /> 
 
    </div> 
 
    </div> 
 
</fieldset>

Answer 1

試試這個：

function validateForm() 
 
{ 
 
    debugger; 
 
    var fields = ["surname", "name", "dob"] 
 
    var i, l = fields.length; 
 
    var fieldname; 
 
    for (i = 0; i < l; i++) { 
 
    fieldname = fields[i]; 
 
    if (document.getElementsByName(fieldname)[0].value === "") { 
 
     alert(fieldname + " can not be empty"); 
 
     return false; 
 
    } 
 
    } 
 
    return true; 
 
} 
 
function doit2() { 
 
    
 
    if(document.getElementById('two').style.display == 'none'){ 
 
     document.getElementById('two').style.display = 'block'; 
 
    } else { 
 
     
 
     if(validateForm()){ 
 
     document.getElementById('two').style.display = 'none'; 
 
     } 
 
    } 
 
}

<fieldset id="fieldset"> 
 
    <legend><a href="#" onclick="doit2()">Personal details</a></legend> 
 
    <div id="two"> 
 
     <div> 
 
      <label>Surname or family name:</label> 
 
      <input type="text" name="surname"/> 
 
     </div> 
 
     <div> 
 
      <label>Given name/names:</label> 
 
      <input type="text" name="name"/> 
 
     </div> 
 
     <div> 
 
      <label> Date of birth:</label> 
 
      <input type="date" name="dob"/> 
 
     </div> 
 
     <div> 
 
      <label> Male </label> 
 
      <input type="radio" name="gender" value="Male" checked/> 
 
     </div> 
 
     <div> 
 
      <label> Female </label> 
 
      <input type="radio" name="gender" value="Female"/> 
 
     </div> 
 
     <div> 
 
      <label> N/A </label> 
 
      <input type="radio" name="gender" value="NA"/> 
 
     </div> 
 
    </div> 
 
</fieldset>

Answer 2

在驗證的第一步，你需要添加到輸入標籤內的每個輸入required。如果你使用默認驗證，你可以保持原樣，其他方面你可以使用正則表達式。如果宇決定使用任何框架 - 引導，角 - 他們有自己的驗證以及

Answer 3

您可以使用document.getElementById("[id of element]").value或document.getElementsByName("[Name of element]").value讓您的輸入值和驗證them.for你的情況下，你可以使用document.getElementsByName篩選：

function validate() { 
 
    if (document.getElementsByName('personal')[0].value.length == 0) { 
 
    //set error 
 
    alert('error'); 
 
    return false; 
 
    } 
 
    //Add other validation here 
 
    return true; 
 
} 
 
//.... 
 
function doit2() { 
 
    if (validate()) { 
 
    if (document.getElementById('two').style.display == 'none') { 
 
     document.getElementById('two').style.display = 'block'; 
 
    } else { 
 
     document.getElementById('two').style.display = 'none'; 
 
    } 
 
    } 
 
}

<fieldset> 
 
    <legend><a href="#" onclick="doit2()">Personal details</a></legend> 
 
    <div id="two"> 
 
    <div> 
 
     <label>Surname or family name:</label> 
 
     <input type="text" name="personal" /> 
 
    </div> 
 
    </div> 
 
</fieldset>