从下拉列表验证中输入输入长度和选定项目

时间:2014-10-19 13:29:56

标签: javascript angularjs forms validation

我有以下表格,我试图验证以下表格状态:

themeName 必须是必需的,并且应该具有最小值。 4个字符。 themeLangFrom 所选值不能与 themeLangTo 相同(反之亦然)。

我想在每个无效字段下显示span错误消息。

我试图通过这种方式做,但我无法通过选择输入来解决它。

有人可以告诉我如何以正确的方式做到这一点吗?

表单代码:

<ul class="nav nav-pills pull-right">
    <li><a href="" ng-click="showModalNewTheme()">Close form</a></li>
</ul>
<h3 class="text-muted">Add New Theme</h3>

<form role="form" name="addThemeForm" id="addThemeForm" >
    <div class="form-group">
        <label for="themeName">Theme name:</label>
        <input id="themeName" type="name" required class="form-control" ng-minlength="4" ng-model="newtheme.name"  placeholder="Enter Theme Name">
        <span class="formValidationError" ng-show="addThemeForm.themeName.$error">Enter valid e-mail</span>
    </div>


    <div class="form-group">
        <label for="themeLangFrom">Language from:</label>
        <select  id="themeLangFrom" required class="form-control" ng-options="language as language.name for language in languages" ng-model="newtheme.langFrom" >
            <option  value="">{{language.name}}</option>
        </select>
    </div>


    <div class="form-group">
        <label for="themeLangTo">Language to:</label>
        <select id="themeLangTo" required class="form-control" ng-options="language as language.name for language in languages" ng-model="newtheme.langTo" >
            <option  value="">{{language.name}}</option>
        </select>
    </div>

    <input ng-click="addTheme(newtheme)" ng-disabled="!addThemeForm.$valid" type="submit" value="Add New Theme" class="btn btn-success btn-block btn-lg">
</form>

1 个答案:

答案 0 :(得分:0)

为了验证themeLangFromthemeLangTo不同,您需要实现自定义指令。

你可以使用angular-ui的ui-validate指令(http://angular-ui.github.io/ui-utils/),或者更好:

滚动你自己...你可以从密码验证指令的许多实现中获取示例,只是注意到与密码验证不同,你需要字段不相等。

您可以在此处查看一些示例:password-check directive in angularjs