Простой JavaScript Checkbox Validation
Я обычно работаю с PHP, поэтому, к сожалению, нет основополагающих принципов JS. Это все, что я хочу сделать - я видел много сообщений по этой теме, но они обычно находятся за пределами того, что мне нужно.
Вот моя форма:
<input type="checkbox" name="checkbox" value="check" />
<input type="submit" name="email_submit" value="submit" onclick="----??----" />
Флажок - это простой "Я согласен". Я хочу, чтобы кнопка отправки нажата, и она будет отправлена только в том случае, если этот флажок установлен.
Вот вещь: я хочу простой, обманный способ - никаких методов - только какой-то встроенный код в этой форме (если предположить, что он не слишком длинный?). Это не общедоступная страница, мне просто нужно что-то быстрое и простое с этим типом проверки. Если его непроверено, он выдает предупреждение(); если его проверит, он будет отправлять через почту через php и продолжать, как обычно.
Ответы
Ответ 1
Вы можете использовать:
if(!this.form.checkbox.checked)
{
alert('You must agree to the terms first.');
return false;
}
(демонстрационная страница).
<input type="checkbox" name="checkbox" value="check" />
<input type="submit" name="email_submit" value="submit" onclick="if(!this.form.checkbox.checked){alert('You must agree to the terms first.');return false}" />
- Возврат
false
из встроенного обработчика событий предотвратит выполнение действия по умолчанию (в этом случае отправьте форму).
-
!
является логическим оператором NOT.
-
this
- кнопка отправки, потому что это элемент, к которому привязан обработчик событий.
-
.form
- это форма, в которой находится кнопка отправки.
-
.checkbox
- это элемент управления с именем "checkbox" в этой форме.
-
.checked
true, если флажок установлен и false, если флажок снят.
Ответ 2
Вы можете сделать что-то вроде этого:
<form action="../" onsubmit="return checkCheckBoxes(this);">
<p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p>
<p><input type="SUBMIT" value="Submit!"></p>
</form>
<script type="text/javascript" language="JavaScript">
<!--
function checkCheckBoxes(theForm) {
if (
theForm.MyCheckbox.checked == false)
{
alert ('You didn\'t choose any of the checkboxes!');
return false;
} else {
return true;
}
}
//-->
</script>
http://lab.artlung.com/validate-checkbox/
Несмотря на то, что он менее разборчивый imho, это можно сделать без отдельного определения функции, например:
<form action="../" onsubmit="if (this.MyCheckbox.checked == false) { alert ('You didn\'t choose any of the checkboxes!'); return false; } else { return true; }">
<p><input type="CHECKBOX" name="MyCheckbox" value="This..."> This...</p>
<p><input type="SUBMIT" value="Submit!"></p>
</form>
Ответ 3
На данный момент не требуется jquery или php. Используйте только "необходимый" входной HTML5, как здесь.
<form>
<p>
<input class="form-control" type="text" name="email" />
<input type="submit" value="ok" class="btn btn-success" name="submit" />
<input type="hidden" name="action" value="0" />
</p>
<p><input type="checkbox" required name="terms">I have read and accept <a href="#">SOMETHING Terms and Conditions</a></p>
</form>
Это будет проверять и предотвращать любые отправки до того, как будет установлен флажок. Независимое от языка решение, потому что оно создано веб-браузером пользователей.
Ответ 4
Вы можете сделать следующее:
<form action="/" onsubmit="if(document.getElementById('agree').checked) { return true; } else { alert('please agree'); return false; }">
<input type="checkbox" name="checkbox" value="check" id="agree" />
<input type="submit" name="email_submit" value="submit" />
</form>
Вот рабочая демонстрация - http://jsfiddle.net/Ccr2x/
Ответ 5
var confirm=document.getElementById("confirm").value;
if((confirm.checked==false)
{
alert("plz check the checkbox field");
document.getElementbyId("confirm").focus();
return false;
}
Ответ 6
Если у вас установлен флажок "checkbox":
if(document.getElementById('checkbox').checked == true){ // code here }
НТН
Ответ 7
Если идентификатор флажка " Удалить", то для события onclick кнопки отправить функция javascript может быть следующей:
html:
<input type="checkbox" name="Delete" value="Delete" id="Delete"></td>
<input type="button" value="Delete" name="delBtn" id="delBtn" onclick="deleteData()">
script:
<script type="text/Javascript">
function deleteData() {
if(!document.getElementById('Delete').checked){
alert('Checkbox not checked');
return false;
}
</script>
Ответ 8
Еще один простой способ - создать функцию и проверить, отмечены ли флажки (флажки) или нет, и отключить кнопку таким образом, используя jQuery.
HTML:
<input type="checkbox" id="myCheckbox" />
<input type="submit" id="myButton" />
JavaScript:
var alterDisabledState = function () {
var isMyCheckboxChecked = $('#myCheckbox').is(':checked');
if (isMyCheckboxChecked) {
$('myButton').removeAttr("disabled");
}
else {
$('myButton').attr("disabled", "disabled");
}
}
Теперь у вас есть кнопка, которая отключена до тех пор, пока они не выберут флажок, и теперь у вас есть лучший пользовательский интерфейс. Я бы удостоверился, что вы все еще выполняете проверку на стороне сервера.
Ответ 9
Ребята, вы можете очень легко сделать такую проверку. Просто вы должны отслеживать идентификатор или имя флажков. вы можете сделать это статически или динамически.
Для статически вы можете использовать жестко кодированный идентификатор флажков, и для динамического использования вы можете использовать имя поля в качестве массива и создать цикл.
Пожалуйста, проверьте приведенную ниже ссылку. Вы получите очень легко.
http://expertsdiscussion.com/checkbox-validation-using-javascript-t29.html
Спасибо