Thursday, February 10, 2011

How to avoid the form being submitted after displaying alert?

If the user name and password does not match it displays a alert but if i click ok to the alert the form is logged in.Can any one tell me how to avoid it?Thanks.

<html>
<f:view>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h:form id="loginForm">
<h1><center>Login page</center> </h1>
<h:panelGrid columns="2">
<h:outputLabel value="UserName"></h:outputLabel>
<h:inputText id="name" value="#{user.name}"> </h:inputText>
<h:outputLabel value="Password"></h:outputLabel>
<h:inputSecret id="password" value="#{user.password}"></h:inputSecret>
</h:panelGrid>
<h:commandButton type="button" value="Login" action="logged" onclick="checkPassword(this.form)"></h:commandButton>
</h:form>
</body>
<script type="text/javascript">
<!--
function checkPassword(form) {
var passsword = form["loginForm:password"].value;
var username=form["loginForm:name"].value;
var confirmpassword ="welcome";
var confirmusername="admin";
if((passsword == confirmpassword)&&(username==confirmusername))
form.submit();
else
alert("Username and Password does not match");
}
-->
</script>
</f:view>
</html>
  • ... onclick="checkPassword(this.form); return false;" ...
    
  • Change the end of your function to

    else {
        alert("Username and Password does not match");
        return false;
    }
    
    From JacobM
  • if((passsword == confirmpassword)&&(username==confirmusername))
    form.submit();
    

    Best not do it like that. If the form is submitted without a button click (eg. in various circumstances when Enter is pressed), your validation won't execute.

    The best place to put validation is in a form.onsubmit event handler. eg.: lose the onclick in the source and put the test on the form programmatically:

    var form= document.getElementById('loginForm');
    form.onsubmit= function() {
        var isok= this.elements['loginForm:username'].value=='admin' && this.elements['loginForm:password'].value=='welcome';
        if (!isok)
            alert('Wrong, fool!');
        return isok;
    }
    

    You are of course aware that client-side password checking is fruitless.

    From bobince

0 comments:

Post a Comment