Hi I am creating a page for resetting the password in JSF2.0, doing so I have come to a situation where I want to check whether the newPassword and confirmPassword are same or not. Below is the code.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a="http://richfaces.org/a4j"
xmlns:o="http://outjected.com/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Reset Password</title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" />
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.min.css" />
<script type="text/javascript">
function checkPassword()
{
alert(" resetPassword.confirmPassword.value ");
var kk = document.getElementById('resetPassword:nwPassword').value;
alert("gshfkjghkfkgfd");
/* alert("resetPassword.newPassword.value "+resetPassword.newPassword.value+" resetPassword.newPassword.value")
if (resetPassword.newPassword.value == resetPassword.confirmPassword.value) {
alert("password matched");
}
else{
alert("password not matched");
} */
return true;
}
</script>
</h:head>
<h:body>
<f:view transient="true">
<o:div>
<div id="resetDiv" class="center-block" style="max-width: 550px;">
<div style="width: 25%" class="center-block text-center">
</div>
<div style="margin-top: 30px;">
<h:messages for="nwPassword" styleClass="list-unstyled"
globalOnly="true"
errorClass="alert alert-thin alert-danger text-center strong"
infoClass="alert alert-thin alert-info text-center strong"
warnClass="alert alert-thin alert-warning text-center strong"
fatalClass="alert alert-thin alert-danger text-center strong" />
<h:messages for="cfrmPassword" styleClass="list-unstyled"
globalOnly="true"
errorClass="alert alert-thin alert-danger text-center strong"
infoClass="alert alert-thin alert-info text-center strong"
warnClass="alert alert-thin alert-warning text-center strong"
fatalClass="alert alert-thin alert-danger text-center strong" />
<h:form name="resetPassword" styleClass="form-horizontal">
<o:decorateInput label="newPassword">
<h:inputText name = "nwPassword" id="nwPassword" value="#{passwordRest.password}"
p:type="password" p:placeholder="New Password" required="true"
requiredMessage="Enter New Password" />
</o:decorateInput>
<br />
<br />
<o:decorateInput label="confirmPassword">
<h:inputText name = "cfrmPassword" id="cfrmPassword"
value="#{passwordRest.password}" p:type="password"
p:placeholder="Confirm Password" required="true"
requiredMessage="Enter Confirm Password" />
</o:decorateInput>
<br />
<br />
<div>
<h:commandButton action="#{passwordRest.reset()}" value="submit"
styleClass="btn btn-default" style="position: absolute;"
onclick="checkPassword()">
<f:param name="u" value="#{param['u']}" />
<f:param name="v" value="#{param['v']}" />
</h:commandButton>
</div>
</h:form>
</div>
</div>
</o:div>
</f:view>
</h:body>
</html>
So My problem is I am not able to access the the new password and confirm password in java script.
