窗體使用javascript make字段必填？

我有一個窗體使用JavaScript文件items.js添加新項目。因此，每次使用form.php並且點擊「添加項目」按鈕，然後顯示新的一行字段以添加細節。窗體使用javascript make字段必填？

因此，例如一些代碼添加字段項名稱如下。

newCell = newRow.insertCell(3); 
newCell.innerHTML = '<input class="item_text_area item_name" type="text" name="0_item_' + new_item + '" id="0_item_' + new_items + '" size="20" maxlength="250" />';

如何編輯此.js文件以使項目名稱字段爲必填項？

任何幫助，將不勝感激。

來源

2013-06-29 nrider

是否要添加某種警報或只是想指示用戶它是必填字段？ –

對於沒有使用items.js的表單的其餘部分，我只需添加class =「blah required」，它將停止提交的表單，同時讓用戶知道某個字段是必需的。我希望表單的.js部分的行爲相同。 – nrider

-2

你可以使用jQuery來做到這一點。添加一個類，在這種情況下'requiredAttr'到必填字段，然後在表單提交上驗證。

<form onsubmit="return validate();"> 
    First Name*: <input class="requiredAttr" type="text" /><br/> 
    Last Name: <input type="text" /><br/> 
    <input type="submit" /> 
</form> 

function validate(){ 
$(".requiredAttr").each(function(){ 
    if($(this).val().length < 1){ 
     alert("please fill in all the required fields."); 
     $(this).focus(); 
     return false; 
    } 
    else{ 
     return true; 
    } 
}); 
return false; 
}

這是一個工作小提琴。它也帶來了關注前未填場驗證警報後：

http://jsfiddle.net/YG6mk/2/

來源

2013-06-29 13:37:54

-1如果用戶沒有聲明他們使用jQuery，則需要使用'raw'javascript的答案。如果你把所有相關的代碼都放在你的答案中，那將會很好，因爲jsfiddle在永久之前不可用。 – Sumurai8

@ Sumurai8首先OP沒有提到他沒有使用jQuery。其次，如果有更好/更容易/更快/等等。做某事的方式總是指出它的好處。這就是爲什麼我們都在這裏，幫助。關於jsfiddle，最好使用一個工作示例。這不應該永遠在這裏。如果你認爲jsfiddle不會到永恆，那麼你會怎麼想呢？ –

將鼠標懸停在JavaScript標記上。 – Sumurai8

每傑文：正如你不能確定用戶有多少項目提交，我會選擇一個方法，即所有新項目有獨特的課程，說dynamicAddedItems。

正如Jeevan所說的，如果返回false，您可以將以下內容添加到表單標記以防止提交。

<form onsubmit="return validate();"></form>

使用javascript：

function validate(){ 
    var elems = document.getElementsByClassName('dynamicAddedItems'); 
    var allgood = true; 

    //Loop through all elements with this class 
    for(var i = 0; i < elems.length; i++) { 
    if(!elems[i].value || !elems[i].value.length) { 
     elems[i].className += " error"; 
     allgood = false; 
    } else { 
     elems[i].className = "item_text_area item_name dynamicAddedItems"; 
    } 
    } 

    //If any element did not meet the requirements, prevent it from being submitted and display an alert 
    if(!allgood) { 
    alert("Please fill in all the required fields."); 
    return false; 
    } 

    //Otherwise submit the form 
    return true; 
}

該腳本將添加錯誤類，如果一個字段爲空，防止表單被提交。這取決於你想如何顯示一個這樣的班級的領域。

來源

2013-06-29 14:14:55 Sumurai8

@ axon111請使用註釋部分來建議改進（只要您有權添加註釋）。添加的break語句將防止突出顯示所有錯誤的字段，這不是代碼的方式工作。 – Sumurai8

窗體使用javascript make字段必填？

回答

相關問題