Чтобы применить проверку к переключателю и множественному выбору - PullRequest
Новая
       0

Чтобы применить проверку к переключателю и множественному выбору

1 голос
/ 09 января 2020

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

MY 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>

Поэтому, пожалуйста, помогите мне с тем, как это можно сделать. .

Спасибо

Ответы [ 3 ]

1 голос
/ 10 января 2020

Это ваш отредактированный код, и он работает 

<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>
1 голос
/ 09 января 2020
Ключевое слово

HTML5 required должно работать, когда вы вводите все входные данные внутри тега <form> и когда инициируется событие submit. Вы можете узнать больше о проверке формы на стороне клиента здесь

0 голосов
/ 09 января 2020

Пожалуйста, проверьте это работает 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...