#javascript #forms #validation
#javascript #формы #проверка
Вопрос:
все мои другие проверки работают, кроме выбранного радиоприемника.. я не знаю, как сделать радио, используя document вместо alert.
мне нужно, чтобы радио и выпадающее меню отображали сообщение (внутри тега span), когда ничего не было выбрано, и мне нужно, чтобы сообщение отключалось или удалялось, когда что-то выбирается.
<script>
window.addEventListener("load", loadEventListeners);
function loadEventListeners() {
document.getElementById("pickBtn").addEventListener("click", checkForm);
document.getElementById("nameTb").addEventListener("change", removeErrorText);
document.getElementById("numTb").addEventListener("change", removeErrorText);
document.getElementById("verbTb").addEventListener("change", removeErrorText);
document.getElementById("numBtwn").addEventListener("change", removeErrorText);
document.getElementById("nameBe").addEventListener("change", removeErrorText);
document.getElementById("list").addEventListener("click", removeErrorText);
}//end of loadEventListeners function
var someName;
var someNum;
var endVerb;
var radioPick;
var numbrBtwn;
var lettrB;
var selList;
var mistakes;
function removeErrorText() {
document.getElementById(this.id "Error").innerHTML = "";
}//end of removeError
function checkForm() {
mistakes = false;
//*****Name TB*****
someName = document.getElementById("nameTb").value;
var letters = /^[A-Za-z] $/;
if(someName=="" || !letters.test(someName)) {
document.getElementById("nameTbError").innerHTML = "You need to enter your first name";
mistakes = true;
}
//***Number TB***
someNum = document.getElementById("numTb").value;
if(someNum=="" || isNaN(someNum)){
document.getElementById("numTbError").innerHTML = "You need to enter a numeric value";
mistakes = true;
}
//***Verb end w/ INg***
endVerb = document.getElementById("verbTb").value;
var ing = /^[A-Za-z] (ing)$/i;
if(endVerb=="" || !ing.test(endVerb)) {
document.getElementById("verbTbError").innerHTML = "You need to enter a verb ending in ing";
mistakes = true;
}
//***Choose RadioButton**
// вот с чем мне нужна помощь. Я не могу использовать идентификатор, который мне нужен, чтобы использовать имя, значит ли это, что я должен поместить его в evenlistener как document.getElementByName(«rb»).addEventListener. («click», removeErrorText)
//**Between TB**
numbrBtwn = document.getElementById("numBtwn").value;
if(numbrBtwn=="" || isNaN(numbrBtwn) || numbrBtwn < 7 || numbrBtwn > 14){
document.getElementById("numBtwnError").innerHTML = "You need to enter a number between 7 and 14";
mistakes = true;
}
//** Start letter Name**
lettrB = document.getElementById("nameBe").value;
var b = /^[Bb]/;
if(lettrB=="" || !b.test(lettrB)){
document.getElementById("nameBeError").innerHTML = "You need to enter a name with the letter B";
mistakes = true;
}
//**Select**
if(document.myForm.list.selectedIndex<=0) {
//alert("you need to select a menu item!!");
document.getElementById("listError").innerHTML = "check";
mistakes=true;
}
else {
selList = document.myForm.list.value;
}
}//end of checkform
<div class="container">
<form class="myForm" id="myForm">
<div class="form-control">
<label id="fName">Enter your first name: </label><span id="nameTbError" class="errorText"></span>
<br>
<input type="text" id="nameTb"><br><br>
<label id="numBr">Enter a number: </label><span id="numTbError" class="errorText"></span>
<br>
<input type="text" id="numTb"/><br><br>
<label>Enter a verb ending in "ing": </label><span id="verbTbError" class="errorText"></span>
<br>
<input type="text" id="verbTb"/><br>
<br>
<label>Choose one: </label><span id="rbError" class="errorText"></span>
<br>
<input type="radio" id="pick1" name="rb" class="rb" value="">
<span id="pick">Choose what's behind door #1</span>
<br>
<input type="radio" id="pick2" name="rb" class="rb" value="">
<span id="pick" >Choose what's behind door #2</span>
<br>
<input type="radio" id="pick3" name="rb" class="rb" value="">
<span id="pick">Choose what's behind door #3</span>
<br>
<input type="radio" id="pick4" name="rb" class="rb" value="">
<span id="pick">Choose what's behind door #4</span>
<br>
<input type="radio" id="pick5" name="rb" class="rb" value="">
<span id="pick">Choose what's behind door #5</span>
<br><br>
<label>Enter a number between 7 - 14: </label><span id="numBtwnError" class="errorText"></span><br>
<input type="text" id="numBtwn"/><br><br>
<label>Enter a name starting with the letter B: </label><span id="nameBeError" class="errorText"></span><br>
<input type="text" id="nameBe"/><br><br>
<label>Select an appropriate option based on the answer above: </label><span id="listError" class="errorText"></span><br>
<select id="list">
<option value="Select">Select One</option>
<option value="Female">Female</option>
<option value="Male">Male</option>
<option value="Neither">Neither</option>
</select><br><br>
<input type="button" id="pickBtn" value="See What You've Won!!">
</div>
</form>
</div>
Комментарии:
1. все мои другие коды проверки работают, они появляются, когда ничего не нажимается, и исчезают, когда я устраняю проблему, но, похоже, я не могу определить переключатель или меню
2. При публикации вопросов, содержащих код, стоит использовать кнопку «{}» в выделенном тексте, чтобы пометить текст как код. Это упрощает задачу для тех, кто хочет взглянуть на проблему, на которую нужно ответить.
Ответ №1:
Итак, прежде всего, вам нужно действие onsubmit в вашей форме. Что-то вроде:
<form class="myForm" id="myForm" onsubmit="return validateForm()">
Затем в вашей функции validateForm() в вашем скрипте вы получаете все радиокнопки по имени (что является коллекцией)
function validateForm() {
var radios = document.getElementsByName("rb");
var validationBoolForm = false;
var i = 0;
while (!validationBoolForm amp;amp; i < radios.length) {
if (radios[i].checked) {
validationBoolForm = true;
}
i
}
if (!validationBoolForm) {
alert("Please select an option!")
}
return validationBoolForm;
}
Что касается вашего выбора,
вы хотите иметь что-то в этом роде:
HTML:
<select id="list" name="genders">
JS:
function validate()
{
var selectOptions = document.getElementById("list"); //might want to change that to be a bit more specific, the id of the select
var selectedValue = selectOptions.options[selectOptions.selectedIndex].value;
if (selectedValue == "Select")
{
alert("Please select something");
}
}
Итак, эта функция проверяет, равно ли выбранное вами значение первому, и в этом случае она выдает сообщение. Если нет, это продолжается.
редактировать: я изменил свой ответ на его новую информацию. Надеюсь, вам помогла эта информация.
Комментарии:
1. Большое спасибо за вашу помощь. Единственное, что вместо всплывающего предупреждения я бы хотел, чтобы сообщение об ошибке отображалось как innerHTML для span с идентификатором «rbError». Как я могу это сделать?
2. Я полагаю, вы можете сделать это с помощью jQuery. Вместо предупреждения у вас будет что-то вроде $(«#rbError»).show() и $(«#rbError»).hide() . Таким образом, вы просто показываете или скрываете метку, в зависимости от состояния / проверенного значения переключателей.
3. Что с вашим другим комментарием: Вы просто спрашиваете значение элемента в if-части, но ничего с ним не делаете. Я рекомендую просто скрыть () и показать () для элемента и поместить текстовое значение, которое уже есть по умолчанию, либо используя html, либо css со свойством content и default display:none , или что-то в этом роде. Чтобы изменить свой код, вы также можете установить для innerHTML значение » «; который удаляет значение метки, но это не очень хорошая практика.
Ответ №2:
for(var i = 0; i < document.myForm.rb.length; i ) {
if(document.myForm.rb[i].checked) {
radioPick = document.myForm.rb.value;
}
else {
document.getElementById("rbError").innerHTML = "You must pick a door";
mistakes = true;
}
}
Комментарии:
1. это код, который сделал то, что мне было нужно. Теперь, когда пользователь не выбирает никаких переключателей и нажимает на кнопку, появится сообщение.
2. протестировал это, и оно работает, чтобы показать мое красное сообщение, но сообщение все равно появляется, когда я выбираю переключатель. почему это происходит? предполагается, что он появляется только тогда, когда выбор не был сделан, а также мне нужно, чтобы сообщение исчезло, когда был сделан выбор