Проверка переключателя в javascript

Необходимо проверить ввод переключателя, т. е. когда кнопка отправки нажата, а переключатели не выбраны, он предупреждает пользователя о том, что «пожалуйста, установите флажок», и если переключатель был выбран, просто отправьте форму, необходимо нет оповещения.

Для этого можно использовать только HTML CSS и JavaScript, я знаю, что в jquery это в 1000 раз проще, но, к сожалению, я не могу это использовать.

И я знаю, что мой HTML-код недействителен, но если он напрямую не влияет на мою текущую проблему, я займусь этим позже.

<form name="form1" action="#" onsubmit="return validateForm()" method="post"> 

    First time visitor?:<br/>
            <label for="s1">Yes</label>
            <input type="radio" id="1" name="yesno" value="1"/>
            <br/>
            <label for="s2">No</label>
            <input type="radio" id="1" name="yesno" value="2"/>

            <br/>       

    <input type="submit" value="Submit"><br/>
    </form>

Любые указатели очень ценятся, спасибо.


javascript validation client-side-validation
person Community    schedule 26.04.2012    source источник
comment
Вы удалили свой вопрос, чтобы переделать тот же, из-за негативных комментариев к другому? Кстати, неверная разметка (например, повторяющийся идентификатор) действительно напрямую влияет на вашу текущую проблему.   -  person Florian Margaine    schedule 26.04.2012
comment
Примечание: идентификаторы не должны начинаться с цифры.   -  person keune    schedule 26.04.2012
comment
@benji Пожалуйста, опубликуйте функцию validateForm.   -  person Ricardo Alvaro Lohmann    schedule 26.04.2012

Ответы (6)


arrow_upward
21
arrow_downward

1-й: Если вы знаете, что ваш код неверен, вы должны исправить его, прежде чем что-либо делать!

Вы можете сделать что-то вроде этого:

function validateForm() {
    var radios = document.getElementsByName("yesno");
    var formValid = false;

    var i = 0;
    while (!formValid && i < radios.length) {
        if (radios[i].checked) formValid = true;
        i++;        
    }

    if (!formValid) alert("Must check some option!");
    return formValid;
}​

Посмотрите его в действии: http://jsfiddle.net/FhgQS/.

person MatuDuke    schedule 26.04.2012
comment
Этот скрипт должен работать для более чем двух переключателей, не так ли? Я использую ваш код, но получаю сообщение об ошибке, что функция validateForm() не определена? Как вы думаете, чем это вызвано? - person Radi; 02.11.2012
comment
Я нашел, в чем проблема. Я скопировал его из jsFiddle и добавил скрытые символы, из-за которых мой код выдает ошибку. Вот страница с более подробной информацией stackoverflow.com/questions/ 4404526/ - person Radi; 02.11.2012
comment
Я бы изменил строку if (radios[i].checked) formValid = true; на if (radios[i].checked) { formValid = radios[i].value; , поэтому оно становится истинным со значением отмеченного элемента. Таким образом, вы узнаете, какой элемент был проверен. Кроме того, всегда используйте фигурные скобки, даже если есть только один элемент. - person Jim Bergman; 25.10.2013

arrow_upward
10
arrow_downward

Пример полной проверки с помощью javascript:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Radio button: full validation example with javascript</title>
        <script>
            function send() {
                var genders = document.getElementsByName("gender");
                if (genders[0].checked == true) {
                    alert("Your gender is male");
                } else if (genders[1].checked == true) {
                    alert("Your gender is female");
                } else {
                    // no checked
                    var msg = '<span style="color:red;">You must select your gender!</span><br /><br />';
                    document.getElementById('msg').innerHTML = msg;
                    return false;
                }
                return true;
            }

            function reset_msg() {
                document.getElementById('msg').innerHTML = '';
            }
        </script>
    </head>
    <body>
        <form action="" method="POST">
            <label>Gender:</label>
            <br />
            <input type="radio" name="gender" value="m" onclick="reset_msg();" />Male
            <br />
            <input type="radio" name="gender" value="f" onclick="reset_msg();" />Female
            <br />
            <div id="msg"></div>
            <input type="submit" value="send>>" onclick="return send();" />
        </form>
    </body>
</html>

С уважением,

Фернандо

person Fernando    schedule 23.10.2013

arrow_upward
6
arrow_downward

Вы можете сделать что-то подобное

var option=document.getElementsByName('yesno');
     
if (!(option[0].checked || option[1].checked)) {
    alert("Please Select Your Gender");
    return false;
}
person Akash_Sahu    schedule 09.08.2018

arrow_upward
2
arrow_downward 

<form action="" method="post" name="register_form" id="register_form" enctype="multipart/form-data">

    <div class="text-input">
        <label>Gender: </label>
        <input class="form-control" type="radio" name="gender" id="male" value="male" />
        <label for="male">Male</label>
        <input class="form-control" type="radio" name="gender" id="female" value="female" />
        <label for="female">Female</label>
    </div>
    <div class="text-input" align="center">
        <input type="submit" name="register" value="Submit" onclick="return radioValidation();" />
    </div>

</form>

<script type="text/javascript">
    function radioValidation(){

        var gender = document.getElementsByName('gender');
        var genValue = false;

        for(var i=0; i<gender.length;i++){
            if(gender[i].checked == true){
                genValue = true;    
            }
        }
        if(!genValue){
            alert("Please Choose the gender");
            return false;
        }

    }
</script>

Источник: http://chandreshrana.blogspot.in/2016/11/radio-button-validation-in-javascript.html

person Chandresh    schedule 14.11.2016

arrow_upward
0
arrow_downward 

document.forms[ 'forms1' ].onsubmit = function() {
    return [].some.call( this.elements, function( el ) {
        return el.type === 'radio' ? el.checked : false
    } )
}

Просто что-то вылетело из головы. Не уверен, что код работает.

person Florian Margaine    schedule 26.04.2012

arrow_upward
0
arrow_downward

В дополнение к приведенным выше решениям Javascript вы также можете использовать решение HTML 5, пометив переключатели в разметке в соответствии с требованиями. Это устранит необходимость в каком-либо Javascript и позволит браузеру сделать всю работу за вас.

См. HTML5: как использовать требуемый атрибут с полем ввода радио для получения дополнительной информации о том, как это сделать.

person Jonathan Geisler    schedule 29.06.2016