带自定义输入框的angularJS验证方法

时间:2016-01-29 10:47:41

标签: javascript jquery angularjs

所以我有这些新的自定义输入,可以在这里找到。

https://scotch.io/tutorials/google-material-design-input-boxes-in-css3

现在唯一的问题是我对此的验证不再有效。

理想情况下,当文本验证问题时,我希望该行变为红色 下面是其中一个输入框的代码

    <input type="text" required placeholder="&#xf040; Event Title" class="validate" ng-model="data.title">
    <span class="fa fa-asterisk req"></span>
    <span class="highlight"></span>
    <span class="bar"></span>
    <!-- <label>Event Title</label> -->
  </div>
</div>
<div class="speech help-block has-error" ng-messages="details.title.$error" ng-if="details.title.$dirty || detailsSubmitted" role="alert">
  <div ng-message="required" class="errormsg">Please enter a Title.</div>
  <div ng-message="custom" class="errormsg">{{errorMessages.title}}</div>
</div>

1 个答案:

答案 0 :(得分:0)

这个例子正在运作

 <form action="" method="get" name="details" accept-charset="utf-8">
        <input type="text" name="title" required placeholder="Event Title" class="validate" ng-model="data.title">

        <span class="fa fa-asterisk req"></span>
        <span class="highlight"></span>
        <span class="bar"></span>
        <div class="speech help-block has-error" ng-messages="details.title.$error" ng-if="details.title.$dirty || detailsSubmitted" role="alert">
            <div ng-message="required" class="errormsg">Please enter a Title.</div>
            <div ng-message="custom" class="errormsg">{{errorMessages.title}}</div>
        </div>
    </form>