I would like to display an error message in login page, if the credentials are wrong or invalid.
error message like "Invalid Username / Password" should be displayed next to the login button
how can this task be accomplished.
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It only takes a minute to sign up.
Sign up to join this communityI would like to display an error message in login page, if the credentials are wrong or invalid.
error message like "Invalid Username / Password" should be displayed next to the login button
how can this task be accomplished.
Easiest way is to have it POST to itself, do a lookup on the DE for User/Pass and then create conditional content.
You cannot do it clientside without exposing your authentication and opening security risks. There are javascript validations you can use, but this is more for general validation - ensuring there is a value there, it fits within X parameters, it is number only, etc.
For example:
%%[
SET @submit = RequestParameter("submit")
IF @submit == 1 THEN
SET @user = RequestParameter("username")
SET @pass = RequestParameter("password")
SET @lookup = LookupRows(@yourDE, "Username", @user, "Password", @pass
SET @valid = Rowcount(@lookup)
ELSE
SET @valid = 0
ENDIF
IF @submit == 1 AND @valid > 0 THEN
]%%
<p>You are now logged in and will be taken to your page</p>
%%[
ELSEIF @Submit == 1 AND (@valid == 0 OR EMPTY(@valid)) THEN
]%%
<p>Your Username or Password was incorrect. Please click <a href="%%=RedirectTo(CloudPagesURL({{yourCloudPageID}}"))=%%">here</a> to try again.</p>
%%[
ELSE
]%%
<form action="%%=RedirectTo(CloudPagesURL("{{yourCloudPageID}}"))=%%">
UserName:<br>
<input type="hidden" name="submit" value="1" />
<input type="text" name="username" value=""><br>
Password:<br>
<input type="text" name="password" value=""><br><br>
<input type="submit" value="Submit">
</form>
%%[
ENDIF
]%%
you can also set Redirect()
functions instead of content in the conditionals if you want to push to a specific page instead of placing all the content on a single page.
EDIT
I just thought of this, but I have no references on whether it will work or not.
For a client side, you could have it so that the user/pass get stored as JS vars and once submit happens it runs your JS function for validation.
Inside this validation function, it will do an HTTP GET (via AJAX or your preferred method) to another Cloudpage that will do the lookup to your user DE and return a value of 'Success' or 'Invalid' and then have the JS conditional to submit form if success or if invalid then display popup with error message.
It is a bit convoluted, but it should provide you with a bit more of a secure way to do real time user/pass validation without a full submission each time.
You might also want to put in an 'attempt max' var in the cloudpage to prevent lookups for x hours after y attempts - so that someone doesn't grab the URL from your JS and spam it to find a valid User/Pass combo.