访问javascript文件中的CSS文件
Access CSS file within a javascript file
我有一个用户表单,其中包含名字、姓氏、密码和确认密码字段。现在我添加了一个密码验证和确认密码,以检查两者是否相同。我有一个javascript文件作为
$(document).ready(function() {
$("#addUser").click(function() {
var password = document.getElementById('password');
var confirmPassword = document.getElementById('confirmPassword');
var message = document.getElementById('confirmMessage');
var matchingColor = "#008000";
var nonMatchingColor = "#ff6666";
if (password.value == confirmPassword.value) {
confirmPassword.style.backgroundColor = matchingColor;
message.style.color = matchingColor;
message.innerHTML = "Passwords Match!"
} else {
confirmPassword.style.backgroundColor = nonMatchingColor;
message.style.color = nonMatchingColor;
message.innerHTML = "Passwords Do Not Match!"
}
})
});
现在我必须从javascript文件中删除css属性。我被要求做一些类似的事情$('#classYouWantToChange').addClass('passwordMatch').removeClass('passwordDoNotMatch')我不知道这是怎么回事。有人能帮忙吗。提前谢谢。
这是jsp文件
<div class="form-horizontal" role="form" id="AddUser">
<form action="adminAddUserForm" method="post">
<fieldset>
<legend>
<fmt:message key="ManageUsers.ADD_USER" />
</legend>
<div class="form-group">
<label class="control-label col-sm-2" for="firstName"><fmt:message
key="addUser.FIRSTNAME_LABEL" /></label>
<div class="col-sm-2"> <input type="text" id="firstName" class="form-control"
name="firstName" required aria-required="true" placeholder="Jon"
title=<fmt:message key="addUser.FIRSTNAME_INPUT_MESSAGE" />
maxlength="30" pattern="[a-zA-Z]+" />
</div>
</div>
<br />
<div class="form-group">
<label class="control-label col-sm-2" for="lastName"><fmt:message
key="addUser.LASTNAME_LABEL" /></label>
<div class="col-sm-2"> <input type="text" id="lastName" class="form-control"
name="lastName" required aria-required="true" placeholder="Doe"
title=<fmt:message key="addUser.LASTNAME_LABEL" />
maxlength="30" pattern="[a-zA-Z]+">
</div>
</div>
<br />
<div class="form-group">
<label class="control-label col-sm-2" for="userName"><fmt:message
key="addUser.USERNAME_LABEL" /></label>
<div class="col-sm-2"> <input type="text" id="userName" class="form-control"
name="userName" required aria-required="true" placeholder="John_Doe"
title=<fmt:message key="addUser.USERNAME_INPUT_MESSAGE" />
pattern="^[a-zA-Z0-9]+([_]?[a-zA-Z0-9])*$" >
</div>
</div>
<br />
<div class="form-group">
<label class="control-label col-sm-2" for="password"><fmt:message
key="addUser.PASSWORD_LABEL" /></label>
<div class="col-sm-2"> <input type="password" name="password" id="password" class="form-control"
title=<fmt:message key="ManageUsers.PASSWORD_VALIDATION" />
required aria-required="true" pattern="(?=.'d)(?=.[A-Z]).{6,}" >
</div>
</div>
<%-- <div id="passwordsMatch" class="passwordsMatch" style="display: none;">
<h5><fmt:message key="ManageUsers.PASSWORDS_MATCH" /> </h5>
</div> --%>
</br>
<div class="form-group">
<label for="confirmPassword" class="control-label col-sm-2"><fmt:message
key="addUser.CONFIRM_PASSWORD_LABEL" /></label>
<div class="col-sm-2"> <input type="password" class="form-control" name="confirmPassword" id="confirmPassword">
<span id="confirmMessage" class="confirmMessage"></span>
</div>
</div>
<div id="passwordsDoNotMatch" class="passwordsDoNotMatch" style="display: none;">
<h5><fmt:message key="ManageUsers.PASSWORDS_NO_NOT_MATCH" /> </h5>
</div>
<c:choose>
<c:when test="${empty signFilter }">
<div class="form-group">
<label class="control-label col-sm-2" for="role"><fmt:message
key="addUser.ROLE_LABEL" /></label>
<input type="radio" id="role" name="userRole" value="ROLE_USER"
checked="checked" /> <fmt:message key="addUser.ROLE_USER" />
<input type="radio" id="role" name="userRole" value="ROLE_INSTRUCTOR" />
<fmt:message key="addUser.ROLE_INSTRUCTOR" />
<input type="radio" id="role" name="userRole" value="ROLE_ADMIN" />
<fmt:message key="addUser.ROLE_ADMIN" />
</div>
</c:when>
<c:otherwise>
<input type="hidden" name="userRole" value="ROLE_USER">
</c:otherwise>
</c:choose>
<br />
<div class="form-group">
<div class="col-sm-offset-2 col-sm-5" id="addUser">
<input type="submit" class= "btn btn-info" name="submitBtn" value="Add User">
</div>
</div>
您可以使用以下方法:
//On event trigger:
//Do validations
//If passwords match, then do this -
$('#idYouWantToModify').addClass('passwordMatch')
//If passwords do not match, then do this -
$('#idYouWantToModify').addClass('passwordDoNotMatch')
//You can remove the classes later if you have any additional steps that want you to do so, by doing the following:
$('#idYouWantToModify').removeClass('whicheverClassYouWantToRemove')
您可以阅读更多关于.addClass()和.removeClass()的信息
为了简化操作,您可以使用jquery toggle类,比如
//If passwords match, then do this -
$('#idYouWantToModify').toggleClass('passwordMatch')
如果不存在则添加类,如果存在则删除
在此处了解更多信息toggleclass
相关文章:
- 关于引入外部javascript文件的问题&css通过https
- 如何修复:当javascript更改DOM时,iOS会删除CSS文件
- 使用Javascript读取CSS文件并动态更改页面
- 限制对HTML/CSS/IMG或根索引文件夹的访问
- 压缩静态HTML文件中的JS和CSS
- js和css文件-在publichtml外部或内部
- Yii2从js脚本的页面上添加来自供应商文件夹的图像、css、js文件
- 加载具有特定CSS的HTML文件
- 将Rails后端添加到JS/HTML/CSS应用程序时,正确的文件位置是什么
- Google PageSpeed Insights与多个CSS文件
- Bootstrap CSS和JS我必须将它们包含在单独的文件中,或者可以编译它们
- Javascript:动态更改CSS文件+Cookie
- 最小化CSS/JS文件,并使用命令行创建一个文件
- 浏览器缓存PHP生成的CSS和Javascript文件
- Nodejs和express无法定位资源文件(CSS&JS文件)
- 如何在Java web应用程序中自动控制静态文件(css、js、image)的版本
- 如何在基于angular-fullstack的应用中包含库文件(css/js)
- MeteorJS外部文件:css和js
- 使用javascript+jquery轻松地重新设计输入类型文件.Css需要在jsfiddle上修复D:
- 在gulp中用0kb的文件css