Angularjs表单验证
我希望没有人能在不提供姓名的情况下保存表单，这是我的Html代码我不知道我做错了什么我检查了很多解决方案请给我一个原因…我想知道我将如何提供前端验证Angularjs表单验证,angularjs,Angularjs,我希望没有人能在不提供姓名的情况下保存表单，这是我的Html代码我不知道我做错了什么我检查了很多解决方案请给我一个原因…我想知道我将如何提供前端验证 <div class="vbox wrapper" ng-controller="CalendarAddController"> <form id ="frmType" name="frmType" class="form-horizontal form-validation" novalidate meth
<div class="vbox wrapper" ng-controller="CalendarAddController">
<form id ="frmType" name="frmType" class="form-horizontal form-validation" novalidate method="get">
<div class="wrapper-v b-b col-lg-8 col-md-9 col-sm-10 col-xs-12" style="padding-bottom:5px;">
<div class="btn-toolbar pull-right ">
<a ui-sref="admin.calendar.entity" class="btn btn-xs btn-default">
Cancel
</a>
<a class="btn btn-xs btn-primary " ng-click="frmType.$valid && save()">Save</a>
</div>
<div class="h4 text-black">Add Calendar</div>
</div>
<h1> </h1>
<div class="wrapper-v col-lg-8 col-md-9 col-sm-10 col-xs-12" style="padding-bottom:5px;">
<div class="btn-toolbar pull-right">
</div>
<h4 class="wrapper text-muted">Calendar</h4>
</div>
<div class="wrapper-md" style="clear:both;">
<div class="form-group">
<label class="col-sm-2 control-label ">Name</label>
<div class="col-sm-8 col-lg-6">
<input type="text" name="name" ng-model="calendar.name"
placeholder="Enter calendar name" ng-minlength="1" ng-maxlength="15" class="form-control" ng-required="true" >
<span class="error code">{{errMsg}}</span>
<p class="help-block error-pattern">
Must start with a letter, may contain alphabets, digits and underscore.
</p>
<p class="error error-minlength">
Must be at least 1 character long.
</p>
<p class="error error-maxlength">
Length of "Name" field must not exceed 15 characters.
</p>
<span ng-show="frmType.name.$error.required && frmType.$submitted">Please provide role name</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Description</label>
<div class="col-sm-8 col-lg-6">
<input type="text" placeholder="Enter description" ng-maxlength="100"
ng-model="calendar.description" class="form-control" />
<p class="error error-maxlength">
Must not exceed 100 characters.
</p>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label ">Starting Day of Week</label>
<div class="col-sm-1 col-lg-1 dd-width">
<select name="startingDay" class="form-control" ng-model="calendar.weekStartDay">
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Working days & Timings</label>
<div class="col-md-8 col-lg-6">
<h4 class="row text-bold">
<span class="col-md-12">
<span class="col-md-3">
Working Days
</span>
<span class="col-md-6 ">
Timing
</span>
</span>
</h4>
<div class="row text-bold" ng-repeat="calDay in calDays" >
<div class="col-md-12">
<div class="col-md-3">
<div class="checkbox">
<label class="i-checks i-checks-xs ">
<input type="checkbox" checklist-model="calendar.workingDays" ng-model="calDay.enabled"
checklist-value="calDay.dayNum" ng-change="selectDay(calDay.dayNum)" ><i></i>{{calDay.dayName}}
</label>
</div>
</div>
<div class="col-md-6">
{{timingDay=corrTimingDay(calDay.dayNum);""}}
<div class="row" >
<button class="btn btn-link" ng-disabled="!calDay.enabled" ng-click="open(timingDay)"
style="margin-bottom:-12px;">Add time block</button>
<span class="tooltipText"></span>
</div>
<div class="timing-chips" ng-repeat="timingBlock in timingDay.timingBlocks">
<span>{{intval(timingBlock.startTime/60)}}:{{makestr(timingBlock.startTime%60)}}
{{ampm(timingBlock.startTime)}} to
{{intval(timingBlock.endTime/60)}}:
{{makestr(timingBlock.endTime%60)}} {{ampm(timingBlock.endTime)}}</span>
<span class="hour">[{{totalTime(timingBlock.startTime,timingBlock.endTime)}} Hour]</span>
<i class="remove fa fa-remove no-padder" ng-click="timingDay.timingBlocks
.splice(timingDay.timingBlocks.indexOf(timingBlock),1)">
</i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper-md " style="clear:both;">
<div class="wrapper-v col-lg-8 col-md-9 col-sm-10 col-xs-12 " style="padding-bottom:5px;">
<h4 class="wrapper text-muted cls-space ">Holidays
<span class="btn-toolbar pull-right">
<a class="btn btn-xs btn-primary " ng-click="holidayOpen('lg')">Apply Holidays
</a> <input id="filter" type="text" ng-model="filterValue"
ng-change="filterTable()" placeholder="search"
class="form-control toolbar-item input-group w-xs inline m-l-xs" />
</span>
</h4>
</div>
<div class="col-lg-8 col-md-9 col-sm-10 col-xs-12 " style="padding-bottom:5px;">
<div class="wrapper-v-md" style="clear: both;">
<table datatable="ng" dt-options="dtOptionsHoliday" class="table table-striped clickable b-a table-condensed" >
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="holiday in calendarHolidays">
<td>{{holiday.name}}</td>
<td>{{holiday.description}}</td>
<td>{{holiday.date}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="wrapper-v col-lg-8 col-md-9 col-sm-10 col-xs-12 " style="padding-bottom:5px;">
<h4 class="wrapper text-muted cls-space">Exceptions
<span class="btn-toolbar pull-right">
<a class="btn btn-xs btn-primary " ng-click="exceptionOpen('lg')">Apply Exceptions
</a> <input id="filter" type="text" ng-model="filterValue"
ng-change="filterTable()" placeholder="search"
class="form-control toolbar-item input-group w-xs inline m-l-xs" />
</span>
</h4>
</div>
<div class="col-lg-8 col-md-9 col-sm-10 col-xs-12 " style="padding-bottom:5px;">
<div class="wrapper-v-md table-space" style="clear: both;">
<table datatable="ng" dt-options="dtOptionsException" class="table table-striped clickable b-a table-condensed" >
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="exception in calendarExceptions">
<td>{{exception.name}}</td>
<td>{{exception.description}}</td>
<td>{{exception.date}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></form>
<!-- <pre>{{calendar |json}}</pre> -->
</div>
取消
拯救
添加日历
历法
名称
{{errMsg}}
必须以字母开头，可能包含字母、数字和下划线。
长度必须至少为1个字符。
“名称”字段的长度不得超过15个字符。
请提供角色名称
描述
不能超过100个字符。
一周的起始日
星期日
星期一
星期二
星期三
星期四
星期五
星期六
工作日和时间安排
工作日
时机
{{calDay.dayName}
{{timingDay=corrTimingDay（calDay.dayNum）；“”}
添加时间块
{{intval（timingBlock.startTime/60）}:{{makestr（timingBlock.startTime%60）}
{{ampm（timingBlock.startTime）}
{{intval（timingBlock.endTime/60）}：
{{makestr（timingBlock.endTime%60）}{{ampm（timingBlock.endTime）}}
[{{totalTime（timingBlock.startTime，timingBlock.endTime）}小时]
假期
申请假期
名称
描述
日期
{{holiday.name}
{{holiday.description}
{{holiday.date}
例外情况
应用例外情况
名称
描述
日期
{{exception.name}
{{exception.description}}
{{exception.date}
必需的看看是否有用吗
<input type="text" name="name" ng-model="calendar.name"
placeholder="Enter calendar name" required >
<input type="submit" ng-disabled="!frmType.$valid">
在您这样做时，只需添加到@thepio的答案上即可
<div class="form-group">
<label class="control-label">Executive Name</label>
<input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Executive Name" name="execName" ng-model="user.execName" ng-pattern="/^[A-z ]*$/" required />
<span class="error" ng-show="createForm.execName.$error.required && createForm.execName.$touched">required</span>
<span class="error" ng-show="createForm.execName.$error.pattern && createForm.execName.$dirty">Must start with a letter, and contain letters only.</span>
</div>
最后一行将禁用“提交”按钮，直到用户在其中键入内容
如果你想检查所有字母是否都是单词，我建议使用ng模式
我在代码中使用的示例
<form name="form" validate>
<input id="name" name="name" md-maxlength="25"
ng-model="name" required autocomplete="false">
<div ng-messages="form.name.$error">
<div ng-message="required">Name field can not empty</div>
</div>
</form>
行政名称
必修的
必须以字母开头，并且仅包含字母。
您可以使用ng消息验证，如：
名称字段不能为空
这里如果有关于这一点的完整信息。请不要添加不必要的代码。另外，请格式化您发布的代码。如果您想验证名称，只需发布表单和名称字段的代码，并解释您的尝试。请参阅@Chris Hermut还原了您的编辑，因为它删除了“保存”一词。“保存表单”和“表单数据”是不同的。感谢您的帮助，但我不想禁用该按钮，我希望当用户提交表单而不输入名称时，它将显示错误“请提供名称”确定，很抱歉听到这个消息。你的代码对我很有用，所以我真的不知道如何帮助你。
<form name="form" validate>
<input id="name" name="name" md-maxlength="25"
ng-model="name" required autocomplete="false">
<div ng-messages="form.name.$error">
<div ng-message="required">Name field can not empty</div>
</div>
</form>