JavaScript空字段和未答复的电台，按钮上的验证按W / Alert

Question

我正在寻找一个JavaScript验证代码，该代码会在按下按钮时将字段留空并且未提供复选标记（男性或女性选项）时提供警报。

这是我的HTML代码：

    <fieldset>
    <h2 class="fs-title">APPLICATION</h2>
    <h3 class="fs-subtitle">Background Information</h3>
    <input type="text" id="fullname" name="fullname" placeholder="Full Name">
    <input type="text" id="email" name="email" placeholder="E-Mail">
    <input type="text" id="phone" name="phone" placeholder="Phone">
    <input type="number" id="age" name="age" placeholder="Age">

    <h4>Gender</h4>
    <div class="row">
        <div>
            <input type="radio" name="gender" value="male" id="gender-male"/>
            <label for="gender-male">Male</label>
        </div>
        <div>
            <input type="radio" name="gender" value="female" id="gender-female"/>
            <label for="gender-female">Female</label>
        </div>

    </div>
    <div class="row">
        <h4>Description</h4>
        <div class="input-group">
            <label for="terms">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipiscing elit, sed do eiusmod tempor. </label>
        </div>
    </div>

    <input type="button" name="next" class="next action-button" value="Next" />
</fieldset>

Answer 1

向按钮添加事件侦听器并检查输入值，如下所示。 出现错误时return false。

＆＃13;

＆＃13;

document.getElementById('btnNext').addEventListener('click',
    function(){
        //text inputs
        if(!document.getElementById('fullname').value){
            alert('full name is required');
            return false;
        }
        //radio buttons
        var genderSet = false;
        var genderBtns = document.getElementsByName('gender');
        //console.log(genderBtns);
        for(var i=0, btn; btn=genderBtns[i];++i){
            if(btn.checked){
                genderSet=true;
                break;
            }
        }
        if(!genderSet){
            alert('Gender is required');
            return false
        }
        console.log('success');
        alert('success');
        return true;

    }
);

＆＃13;

<fieldset>
    <h2 class="fs-title">APPLICATION</h2>
    <h3 class="fs-subtitle">Background Information</h3>
    <input type="text" id="fullname" name="fullname" placeholder="Full Name">
    <input type="text" id="email" name="email" placeholder="E-Mail">
    <input type="text" id="phone" name="phone" placeholder="Phone">
    <input type="number" id="age" name="age" placeholder="Age">

    <h4>Gender</h4>
    <div class="row">
        <div>
            <input type="radio" name="gender" value="male" id="gender-male"/>
            <label for="gender-male">Male</label>
        </div>
        <div>
            <input type="radio" name="gender" value="female" id="gender-female"/>
            <label for="gender-female">Female</label>
        </div>

    </div>
    <div class="row">
        <h4>Description</h4>
        <div class="input-group">
            <label for="terms">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Consectetur adipiscing elit, sed do eiusmod tempor. </label>
        </div>
    </div>

    <input type="button" name="next" id="btnNext" class="next action-button" value="Next" />
</fieldset>

＆＃13;

＆＃13;

＆＃13;

如果所有输入都在form内，那么最好是监听submit事件并按名称引用输入。

<form id="Form1">
    <!-- your HTML -->
    <input type="submit" />
</form>
<script>
    document.getElementById('Form1').addEventListener('submit',
        function(){
            if(!this['firstname'].value) //**this** here is the form here. 'firstname' is **name** attribute, not **id**
                return false;
            if(!this['gender'].value)
                return false;
        });
</script>