Javascript 验证所需的表单
我有一张这样的表格：Javascript 验证所需的表单,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我有一张这样的表格： <div class="row" id="yesAuth"> <div class="col-md-6" ng-class="{ 'has-error': invalid.basicAuthForBackendUsername, 'has-success': valid.basicAuthForBackendUsername}"> <div class="form-group"> <la
<div class="row" id="yesAuth">
<div class="col-md-6" ng-class="{ 'has-error': invalid.basicAuthForBackendUsername, 'has-success': valid.basicAuthForBackendUsername}">
<div class="form-group">
<label for="basicAuthForBackendUsername">basic auth username *</label>
<input type="text" name="basicAuthForBackendUsername" class="form-control" placeholder="basic auth username" ng-model="api.basicAuthForBackendUsername" ng-required="true">
<span id="helpBlock" class="help-block" ng-show="help.basicAuthForBackendUsername.required">basic auth username is required.</span> </div>
</div>
</div>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="jumbotron" ng-show="firstPage">
<h3>API builder</h3>
<form action="/publish" method="POST" name="userForm">
<div class="panel panel-default">
<div class="panel-heading"><h4>Offer</h4></div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.apiName, 'has-success': valid.apiName}">
<label for="apiName">api name *</label>
<input type="text" name="apiName" class="form-control" placeholder="api name" ng-model="api.apiName" ng-required="true">
<span id="helpBlock" class="help-block" ng-show="help.apiName.required">api name is required.</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.version, 'has-success': valid.version}">
<label for="version">version *</label>
<select name="version" id="version" class="form-control" ng-init="api.version = api.version || ''" ng-model="api.version" ng-required="true">
<option value=""></option>
<option value="beta">beta</option>
<option value="v1">v1</option>
<option value="v2">v2</option>
<option value="v3">v3</option>
<option value="v4">v4</option>
</select>
<span id="helpBlock" class="help-block" ng-show="help.version.required">version is required.</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" ng-class="{ 'has-error': invalid.backendServiceUrl, 'has-success': valid.backendServiceUrl}">
<div class="form-group" >
<label for="backendServiceUrl">backend service URL *</label>
<input type="text" name="backendServiceUrl" class="form-control" placeholder="backend service URL" ng-model="api.backendServiceUrl" ng-required="true">
<span id="helpBlock" class="help-block" ng-show="help.backendServiceUrl.required">backend service URL is required.</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" id="basicAuth">
<label for="basicAuth">basic auth info</label>
<select name="basicAuth" class="form-control" ng-init="api.basicAuth = api.basicAuth || 'no'" ng-model="api.basicAuth" id="basicAuth" >
<option value="no">no</option>
<option value="yes">yes</option>
</select>
</div>
</div>
</div>
<div class="row" id="yesAuth">
<div class="col-md-6" ng-class="{ 'has-error': invalid.basicAuthForBackendUsername, 'has-success': valid.basicAuthForBackendUsername}">
<div class="form-group" >
<label for="basicAuthForBackendUsername">basic auth username *</label>
<input type="text" id="basicAuthForBackendUsername" name="basicAuthForBackendUsername" class="form-control" placeholder="basic auth username" ng-model="api.basicAuthForBackendUsername" >
<span id="helpBlock" class="help-block" ng-show="help.basicAuthForBackendUsername.required">basic auth username is required.</span>
</div>
</div>
<div class="col-md-6" ng-class="{ 'has-error': invalid.basicAuthForBackendPassword, 'has-success': valid.basicAuthForBackendPassword}">
<div class="form-group" >
<label for="basicAuthForBackendPassword">basic auth password *</label>
<input type="text" id="basicAuthForBackendPassword" name="basicAuthForBackendPassword" class="form-control" placeholder="basic auth password" ng-model="api.basicAuthForBackendPassword">
<span id="helpBlock" class="help-block" ng-show="help.basicAuthForBackendPassword.required">basic auth password is required.</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.apiDescription, 'has-success': valid.apiDescription}">
<label for="apiDescription">api description *</label>
<input type="text" name="apiDescription" class="form-control" placeholder="description..." ng-model="api.apiDescription" ng-required="true">
<span id="helpBlock" class="help-block" ng-show="help.apiDescription.required">api description is required.</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.useProxy, 'has-success': valid.useProxy}">
<label for="useProxy">backend exposed on the Internet *</label>
<select name="useProxy" class="form-control" ng-init="api.useProxy = api.useProxy || 'yes'" ng-model="api.useProxy" ng-required="true">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="iconUrl">icon URL</label>
<input type="text" name="iconUrl" class="form-control" placeholder="icon URL" ng-model="api.iconUrl">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="statusUrl">get status URL</label>
<input type="text" name="statusUrl" class="form-control" placeholder="get status URL" ng-model="api.statusUrl">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.approvalMode, 'has-success': valid.approvalMode}">
<label for="approvalMode">approval mode *</label>
<select name="approvalMode" class="form-control" ng-init="api.approvalMode = api.approvalMode || 'auto'" ng-model="api.approvalMode" ng-required="true">
<option value="auto">auto</option>
<option value="manual">manual</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.orangeInternalContact, 'has-success': valid.orangeInternalContact}">
<label for="orangeInternalContact">orange internal contact *</label>
<input type="text" name="orangeInternalContact" class="form-control" placeholder="orange internal contact" ng-model="api.orangeInternalContact" ng-required="true">
<span id="helpBlock" class="help-block" ng-show="help.orangeInternalContact.required">orange internal contact is required.</span>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading"><h4><input type="checkbox" ng-model="api.swagger"> Generation from swagger</h4></div>
<div class="panel-body" ng-show="api.swagger">
<div class="form-group" ng-class="{ 'has-error': invalid.swaggerSource, 'has-success': valid.swaggerSource}">
<label for="generateFromIntegrationSwaggerUrl">
<input type="radio" name="swaggerSource" ng-model="api.swaggerSource" value="url" checked ng-required="api.swagger && api.swaggerSource != 'file'">
Swagger URL hosted by the integration backend
</label>
<span id="helpBlock" class="help-block" ng-show="help.swaggerSource.required">One option is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': invalid.swaggerSource, 'has-success': valid.swaggerSource}">
<label for="swaggerFile">
<input type="radio" name="swaggerSource" ng-model="api.swaggerSource" value="file" ng-required="api.swagger && api.swaggerSource != 'url'">
Upload Swagger 2.0 JSON file
</label>
<span id="helpBlock" class="help-block" ng-show="help.swaggerSource.required">One option is required</span>
<input type="file" file-model="myFile" name="swaggerFile" class="btn btn-info">
</div>
</div>
</div>
<button ng-click="publish()" class="btn btn-lg btn-primary" type="button">Publish</button>
<p ng-show="validatingStatus==='loading'">
<div ng-show="validatingStatus==='loading'" class="alert alert-info" role="alert">Please wait. Operation in progress. <img src="<c:url value="/resources/images/ajax-loader.gif" />"></div>
</p>
</form>
</div>
<script>
$(function () {
$('#yesAuth').hide();
$("#basicAuth").change(function () {
if($("#basicAuth option:selected").val() == 'yes'){
$('#yesAuth').show();
$('#basicAuthForBackendUsername').attr("ng-required","true");
$('#basicAuthForBackendPassword').attr("ng-required","true");
alert("VOILA" + $('#basicAuthForBackendPassword').attr("ng-required"))
}
else{
$('#yesAuth').hide();
$('#basicAuthForBackendUsername').removeAttr("ng-required");
$('#basicAuthForBackendPassword').removeAttr("ng-required");
alert("VOILA" + $('#basicAuthForBackendPassword').attr("ng-required"));
}
});
});
</script>
API生成器
提供
api名称*
api名称是必需的。
版本*
贝塔
v1
v2
v3
v4
版本是必需的。
后端服务URL*
需要后端服务URL。
基本身份验证信息
不
对
基本身份验证用户名*
需要基本身份验证用户名。
基本身份验证密码*
需要基本身份验证密码。
api说明*
api说明是必需的。
后端暴露在互联网上*
对
不
图标URL
获取状态URL
审批模式*
汽车
手册
橙色内部触点*
需要橙色内部触点。
大摇大摆的一代
集成后端托管的招摇过市URL
需要一种选择
上传Swagger 2.0 JSON文件
需要一种选择
发表
请稍等。行动正在进行中。">
$（函数（）{
$（'yesAuth'）.hide（）；
$（“#basicAuth”）。更改（函数（）{
if（$（“#基本选项：选中”）.val（）==‘是’）{
$（'yesAuth'）.show（）；
$（'#basicAuthForBackendUsername'）.attr（“ng必需”、“true”）；
$（“#basicAuthForBackendPassword”）.attr（“ng必需”、“true”）；
警报（“瞧”+$（“#basicAuthForBackendPassword”）.attr（“需要ng”））
}
否则{
$（'#y
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<div class="jumbotron" ng-show="firstPage">
<h3>API builder</h3>
<form action="/publish" method="POST" name="userForm">
<div class="panel panel-default">
<div class="panel-heading"><h4>Offer</h4></div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.apiName, 'has-success': valid.apiName}">
<label for="apiName">api name *</label>
<input type="text" name="apiName" class="form-control" placeholder="api name" ng-model="api.apiName" ng-required="true">
<span id="helpBlock" class="help-block" ng-show="help.apiName.required">api name is required.</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.version, 'has-success': valid.version}">
<label for="version">version *</label>
<select name="version" id="version" class="form-control" ng-init="api.version = api.version || ''" ng-model="api.version" ng-required="true">
<option value=""></option>
<option value="beta">beta</option>
<option value="v1">v1</option>
<option value="v2">v2</option>
<option value="v3">v3</option>
<option value="v4">v4</option>
</select>
<span id="helpBlock" class="help-block" ng-show="help.version.required">version is required.</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6" ng-class="{ 'has-error': invalid.backendServiceUrl, 'has-success': valid.backendServiceUrl}">
<div class="form-group" >
<label for="backendServiceUrl">backend service URL *</label>
<input type="text" name="backendServiceUrl" class="form-control" placeholder="backend service URL" ng-model="api.backendServiceUrl" ng-required="true">
<span id="helpBlock" class="help-block" ng-show="help.backendServiceUrl.required">backend service URL is required.</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" id="basicAuth">
<label for="basicAuth">basic auth info</label>
<select name="basicAuth" class="form-control" ng-init="api.basicAuth = api.basicAuth || 'no'" ng-model="api.basicAuth" id="basicAuth" >
<option value="no">no</option>
<option value="yes">yes</option>
</select>
</div>
</div>
</div>
<div class="row" id="yesAuth">
<div class="col-md-6" ng-class="{ 'has-error': invalid.basicAuthForBackendUsername, 'has-success': valid.basicAuthForBackendUsername}">
<div class="form-group" >
<label for="basicAuthForBackendUsername">basic auth username *</label>
<input type="text" id="basicAuthForBackendUsername" name="basicAuthForBackendUsername" class="form-control" placeholder="basic auth username" ng-model="api.basicAuthForBackendUsername" >
<span id="helpBlock" class="help-block" ng-show="help.basicAuthForBackendUsername.required">basic auth username is required.</span>
</div>
</div>
<div class="col-md-6" ng-class="{ 'has-error': invalid.basicAuthForBackendPassword, 'has-success': valid.basicAuthForBackendPassword}">
<div class="form-group" >
<label for="basicAuthForBackendPassword">basic auth password *</label>
<input type="text" id="basicAuthForBackendPassword" name="basicAuthForBackendPassword" class="form-control" placeholder="basic auth password" ng-model="api.basicAuthForBackendPassword">
<span id="helpBlock" class="help-block" ng-show="help.basicAuthForBackendPassword.required">basic auth password is required.</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.apiDescription, 'has-success': valid.apiDescription}">
<label for="apiDescription">api description *</label>
<input type="text" name="apiDescription" class="form-control" placeholder="description..." ng-model="api.apiDescription" ng-required="true">
<span id="helpBlock" class="help-block" ng-show="help.apiDescription.required">api description is required.</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.useProxy, 'has-success': valid.useProxy}">
<label for="useProxy">backend exposed on the Internet *</label>
<select name="useProxy" class="form-control" ng-init="api.useProxy = api.useProxy || 'yes'" ng-model="api.useProxy" ng-required="true">
<option value="yes">yes</option>
<option value="no">no</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="iconUrl">icon URL</label>
<input type="text" name="iconUrl" class="form-control" placeholder="icon URL" ng-model="api.iconUrl">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="statusUrl">get status URL</label>
<input type="text" name="statusUrl" class="form-control" placeholder="get status URL" ng-model="api.statusUrl">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.approvalMode, 'has-success': valid.approvalMode}">
<label for="approvalMode">approval mode *</label>
<select name="approvalMode" class="form-control" ng-init="api.approvalMode = api.approvalMode || 'auto'" ng-model="api.approvalMode" ng-required="true">
<option value="auto">auto</option>
<option value="manual">manual</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group" ng-class="{ 'has-error': invalid.orangeInternalContact, 'has-success': valid.orangeInternalContact}">
<label for="orangeInternalContact">orange internal contact *</label>
<input type="text" name="orangeInternalContact" class="form-control" placeholder="orange internal contact" ng-model="api.orangeInternalContact" ng-required="true">
<span id="helpBlock" class="help-block" ng-show="help.orangeInternalContact.required">orange internal contact is required.</span>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading"><h4><input type="checkbox" ng-model="api.swagger"> Generation from swagger</h4></div>
<div class="panel-body" ng-show="api.swagger">
<div class="form-group" ng-class="{ 'has-error': invalid.swaggerSource, 'has-success': valid.swaggerSource}">
<label for="generateFromIntegrationSwaggerUrl">
<input type="radio" name="swaggerSource" ng-model="api.swaggerSource" value="url" checked ng-required="api.swagger && api.swaggerSource != 'file'">
Swagger URL hosted by the integration backend
</label>
<span id="helpBlock" class="help-block" ng-show="help.swaggerSource.required">One option is required</span>
</div>
<div class="form-group" ng-class="{ 'has-error': invalid.swaggerSource, 'has-success': valid.swaggerSource}">
<label for="swaggerFile">
<input type="radio" name="swaggerSource" ng-model="api.swaggerSource" value="file" ng-required="api.swagger && api.swaggerSource != 'url'">
Upload Swagger 2.0 JSON file
</label>
<span id="helpBlock" class="help-block" ng-show="help.swaggerSource.required">One option is required</span>
<input type="file" file-model="myFile" name="swaggerFile" class="btn btn-info">
</div>
</div>
</div>
<button ng-click="publish()" class="btn btn-lg btn-primary" type="button">Publish</button>
<p ng-show="validatingStatus==='loading'">
<div ng-show="validatingStatus==='loading'" class="alert alert-info" role="alert">Please wait. Operation in progress. <img src="<c:url value="/resources/images/ajax-loader.gif" />"></div>
</p>
</form>
</div>
<script>
$(function () {
$('#yesAuth').hide();
$("#basicAuth").change(function () {
if($("#basicAuth option:selected").val() == 'yes'){
$('#yesAuth').show();
$('#basicAuthForBackendUsername').attr("ng-required","true");
$('#basicAuthForBackendPassword').attr("ng-required","true");
alert("VOILA" + $('#basicAuthForBackendPassword').attr("ng-required"))
}
else{
$('#yesAuth').hide();
$('#basicAuthForBackendUsername').removeAttr("ng-required");
$('#basicAuthForBackendPassword').removeAttr("ng-required");
alert("VOILA" + $('#basicAuthForBackendPassword').attr("ng-required"));
}
});
});
</script>
<input type="text" ng-required="api.basicAuth == 'yes'" ng-model="api.basicAuthForBackendUsername">