Question

我在AngularJS中有一个表单，在该表单中，我有一个单选按钮，其中有两个选项和两个多选按钮。我希望如果表单未填写，则不应该提交该表单，我希望所有这三个表单均符合要求提交表格。我已在select元素中应用了HTML5的必需关键字，但它无法正常工作。

我的HTML代码：

<div class="form-group">
    <label style = "position:relative; left:-170px; top:35px">Params:</label>
    <div style = "position: relative; left: 200px; top: 10px">
        <select multiple chosen class="chosen-select"
                ng-model="recom.recoparams" name="account7" id ="params"
                tabindex="4" style = "width:880px;"
                ng-options = "y as y.paramName for y in params">
          <option value="">--Select--</option>
        </select>
    </div>
</div>


    <div>
    <label style =  "position:relative; left:10px; top:20px">Please Choose One:</label>
    <div  style = "position: relative; left: 200px; top:-13px">
    <div>
    <input type="radio" checked="checked" value="OverallCompany" id="optionsRadios1" name="optionsRadios" ng-model="recom.radio"> OverallCompany</div>
    <div>
    <input type="radio" value="Demographics" id="optionsRadios2" name="optionsRadios" ng-model="recom.radio" >Demographics
    </div>
    </div>
    </div>

    <div class="form-group" ng-show="recom.radio=='Demographics'">
    <label style="position: relative; left:10px; top: 28px">Demographics:</label>
    <div style = "position: relative; left:200px">
    <select multiple chosen class="chosen-select" id="demo" ng-model="recom.demo" ng-options = "z as z.demographicName for z in demotype" tabindex="4" style = "width:880px;">
    </select>
    </div>
    </div>

所以请帮助我如何做。

谢谢

Answer 1

当您将所有输入都放在required标记内，并且一旦触发了提交事件时，

HTML5 <form>关键字应该可以工作。您可以了解有关客户端表单验证here

的更多信息

Answer 2

这是您编辑的代码，正在运行

<form>
<div class="form-group">
    <label style = "position:relative; left:-170px; top:35px">Params:</label>
    <div style = "position: relative; left: 200px; top: 10px">
        <select multiple chosen class="chosen-select"
                ng-model="recom.recoparams" name="account7" id ="params"
                tabindex="4" style = "width:880px;"
                ng-options = "y as y.paramName for y in params" required>
          <option value="">--Select--</option>
        </select>
    </div>
</div>


    <div>
    <label style =  "position:relative; left:10px; top:20px">Please Choose One:</label>
    <div  style = "position: relative; left: 200px; top:-13px">
    <div>
    <input type="radio" checked="checked" value="OverallCompany" id="optionsRadios1" name="optionsRadios" ng-model="recom.radio" required> OverallCompany</div>
    <div>
    <input type="radio" value="Demographics" id="optionsRadios2" name="optionsRadios" ng-model="recom.radio" required>Demographics
    </div>
    </div>
    </div>

    <div class="form-group" ng-show="recom.radio=='Demographics'">
    <label style="position: relative; left:10px; top: 28px">Demographics:</label>
    <div style = "position: relative; left:200px">
    <select multiple chosen class="chosen-select" id="demo" ng-model="recom.demo" ng-options = "z as z.demographicName for z in demotype" tabindex="4" style = "width:880px;" required>
    </select>
    </div>
    </div>
    <button type="submit">Submit</button>
    </form>

Answer 3

请检查这是否有效

function onSubmit(){
console.log("hello")
return
}

<!DOCTYPE html>
<html>
<body>

<form onSubmit=onsubmit()>
Male:<br>
<input type="radio" name="gender" value="male" required="true">
<br>
Female:<br>
<input type="radio" name="gender" value="female" required="true">
<br><br>

<select multiple required="true">
<option>One</option>
<option>Two</option>
<option>three</option>
<option>four</option>
<option>five</option>
<option>six</option>
</select><br/><br/><br/><br/>

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

</body>
</html>

要对单选按钮和多选应用验证

3 个答案: