I have two forms on a page whose inputs I want validate and both have captchas which I also want to validate.
Clicking the forms submit button will either console.log( $(this) ); #form1 or #form2 depending which one was clicked. With that I can safely target the respective inputs, but with captcha I dont know if you can do that. I'm using the below code that works when theres only one captcha. My guess is, because it isnt using $(this) or something similar, it uses both forms recaptcha and breaks. In what way could I only trigger the captcha that is inside the currently submitted form?
if (grecaptcha && grecaptcha.getResponse().length > 0) {
//the recaptcha is checked
reCaptcha = true;
} else {
//The recaptcha is not cheched
reCaptcha = false;
$(this).find('.g-recaptcha').addClass('captcha-error');
}
You should not need more than 1 captcha per page.
The purpose of captcha's is to protect against bots. Once someone has solved a captcha, they have earned the trust of the website insofar as they are not a bot.
Requiring users to solve more than one is entirely pointless. My suggestion is to place the one captcha in a convenient spot, such that it clearly applies to both captchas.
Related
I building an eCommerce website for a client. However anyone with a good idea about jQuery/JS should be able to help as this does not relate to the backend.
They want to show a 'hidden' shop page, when a generic password is entered.
So on the homepage of the site will be a password field, and a submit button.
The password is generic, let's say 'letmein'. When entered, the link to the shop page should become active.
If possible it would also be great to have the link greyed out/disabled before the correct word is typed.
Is this possible? Thanks so much if anyone can help!
If passwords do matter and there is sensitive data behind this door you are creating, this is a terrible idea. Passwords should never be a front-end data, because they are accessible to anyone with computer. If user access really doesn't matter and this is just a superficial gateway to make users feel special, JavaScript is indeed the answer. If access is casual and security doesn't actually matter you should try this:
You could create a link that stays inactive until the right password is entered into an HTML <input>. Use JavaScript/jQuery to check if the password is correct and change the anchor's value if it is.
Something like this maybe:
HTML:
Password Invalid
<input type="text" id="password-field" />
JS:
var correctPass = "letmein"; // any password you want
$("#password-field").on("change", function() { // everytime the value changes we check the input for the password
if ($(this).val() == correctPass) { // if the value of the input is the password (no submit needed)
$("#link-to-site").attr("href", "www.actual-site-link.com"); // changes link of anchor
$("#link-to-site").html("You're in!"); // changes anchor's text to show a visual change (a nice UX touch)
}
});
Here's a working fiddle: JSFiddle
You can add the href after the password is correct and remove if it isn't like this here is working fiddle
As long as security doesn't matter this is just a link that you want to open up to everyone with no backend validation then this will work fine.
function updateLink(input) {
if (input.value == "letmein") {
document.getElementById("atag").href = "http://www.google.com";
} else {
document.getElementById("atag").removeAttribute("href");
}
}
<html>
<body>
<input type="text" onkeyup="updateLink(this);">
<a id="atag">Google</a>
</body>
</html>
However anyone with a good idea about jQuery/JS should be able to help as this does not relate to the backend.
Doing this on the front end is a bad idea. Anyone with a rudimentary knowledge of scripting will be able to enable the link (even without typing in the "password")
Thanks for your answers all.
To answer this question - no, security is not an issue here. It is just to add a layer of exclusivity. Users will receive the generic password when they sign up for the mailing list.
I'm using a form that has 3 parts, login, forgot password and registration. The initial view is the login form, but can be changed to the forgot password or registration form, which replaces the initial view by using JS.
I'm looking to post back to the page if validation isn't met. This seems to be working fine, and the field repopulates itself. However I can't get the right form to load when posted back.
For example, if the user is filling out the forgot password form, and fills in an invalid email address, the message at the top of the form will be correct, however the form that will appear is the default login form. Once the user clicks on the forgot password button, JS kicks it over to the forgot password form, and has the users invalid email address re-populated. Each form has a unique "form_type" hidden variable to differentiate between the three, so I can use this to check then load the right one. Ideally I would like to keep this as 1 page and use JS to swap between the three if possible.
I don't know how to get it to load the right form once posted back. It's using the below code to change between the forms. How do I link to the right form when posting back.
<a href="javascript:;" id="forget-password">
<a href="javascript:;" id="register-btn">
I'm not good with JS at all, and I think this is the issue. The front end and JS is all created by a third party, it's "Metronic" theme. Let me know if I need to include any JS. If it makes a difference, although the logic should be the same, I'm using codeigniter too.
EDIT All the functionality to swap between the forms is there, I just need it to POST back to the right form. This is what I have so far, if you click on the forgot password and enter an email address that is longer than 5 characters, you'll see what I mean. I obviously didn't ask this very well...
Once the user submits, and the form is posted back with errors, I need right form to pop up, rather than the default for the page. The tags above are the links used to swap between the different forms.
May be you can try on posting back to view also bring one extra variable say 'show_form'
in that show_form have you form id and based on that do jquery hide/show method
like $('#' + show_form).show() and other 2 hide.
you can try this.
I'm not sure I understand exactly what you're asking.
Do you need to have 3 forms in the same page and swap between them with JS?
If so, give each of the forms a unique ID and have 2 forms with display: none. then all you have to do (assuming you do not want to use jQuery) is just to change the style.
HTML:
<form id="first_form" class="form-visible">
...
</form>
<form id="second_form" class="form-gone">
...
</form>
<form id="third_form" class="form-gone">
...
</form>
CSS:
.form-visible
{
display: inline;
}
.form-visible
{
display: none;
}
JS:
function swapForms(id)
{
Swap-between-forms
}
differentiate the form with some variable . for example after submission form you can post back errors in variable name like if the submitted form is forgot password means define the variable name is $forgot like that. in view file check if(isset($forgot)) then set it's style as display block .
I am building a HTML application (with Javascript, CSS). It is an user-interaction based application. I have a requirement where the user gets a prompt box with option to enter his/ her comments and to either accept (OK) or reject (Cancel) the action. When the user accepts (OK) i can read the user-comments. However, I also want capture the user comments when the Cancel button is pressed.
Most of the examples which I saw (either using custom box or window.prompt) only read the inputs on OK but nothing on cancel. Also as per window.prompt definition it does not read the comments box on cancellation. How can this be achieved?
if (alertInfo.indexOf(checkString) > -1){//check if a string is present in the message
var showPrompt = window.prompt("Please enter your remarks", "");
if(showPrompt != null){
userAccepted(showPrompt);
}
else{
sendRejection();// This is where I also need to read the user comments
}
}
else{
//reload the page
}
You're trying to misuse the feature. Cancel means cancel, not "OK but do something else". That's why you can't do this.
You'll have to find another way, such as rendering your own <form> to obtain the comments.
As #Lightness Races in Orbit said, you simply can't do it with the windows prompt. You have to make a floating div and make it visible instead of the windows prompt.
You can have radio buttons that requires the user to accept or decline, a text box to enter comments and a single OK button to close the dialog ("basically hiding the DIV").
Instead of a floating div, the user was directed to a new page where he / she could enter the inputs and either accept or reject the action. The advantage of having a separate page is that the user does not have to zoom-in / out the page to properly view the contents.
Thanks.
How can we redirect to another page after checking password without clicking on any button? After entering password it should check and automatically redirect to next specified page.
Do I need to add any function in text-box input tag?
//This is my HTML code.
<div style="margin-top:27%;margin-left:40%;">
<b><i>Enter pin</i></b>
</div>
<input type="password" id="pwd" autofocus required>
//This is the javascript.
<script>
function login()
{
logged_in=false;
var pin=documemt.getElementById("pwd").value();
if(pin=="hotel")
{
logged_in=true;
window.open("screen3.html","_self");
}
else
alert("Please enter correct pin");
}
</script>
Maybe this isn't a fully technical answer, but it is worth to mention here.
NEVER store passwords in javascript manifestly. User can open this file and just read it. For Your question, there is an answer.
You must have a php file that can check the password (get from the post).
<?php if(isset($_POST['pass']) && $_POST['pass'] == 'hotel') echo "ok"; ?>
Then using for example Jquery and AJAX on every change in input send ajax request to this php file with posted password. Than compare downloaded file with "ok", and if OK, use javascript window.location.replace("new url");
This is one from milions of possible answers. But remember that You should set session and remember login person, and check it on every other site. In other case, someone can enter manually the same url, that You are redirecting, and password isn't needed.
Hope it helps
Jacek
PS. this php file should also be protected for multiple password comparison, in other case it is easy to break easy passwords with bruteforce, knowing the mechanism.
PS 2. Nevertheless, in my opinion, You are doing something wrong, and this approach should be rethinked... My proposed answer also is very, very, very general. Too general.
UPDATE
Maybe better answer is to make a standart php script for logging with server verification and submit button. Then, using Javascript, hide submit button, and on input change simulate clicking it. But in that case, if password is wrong, the page should remember what the user has entered... It isn't difficult to write in php:
$input_value = isset($_POST['password']) ? $_POST['password'] : '';
But I really vote for leaving the submit button as the mother nature learned us ;).
Thx for replies, best regards.
First off you need a way to connect your input element to a function, if you don't want to use a submit button you could use some sort of on-change/on-keyup handler to detect input.
Javascript bind keyup/down event
In this function I'd recommend a better way of validation, like Jacek said.
When you figured out how to do that, you might want to take a look at this question:
How can I make a redirect page in jQuery/JavaScript?
Use of onKeyUP Event of input text as below Example.
<input type="text" onKeyUP="login();" id="pwd">
<script>
function login()
{
logged_in=false;
var pin=documemt.getElementById("pwd").value();
if(pin=="hotel")
{
logged_in=true;
window.open("screen3.html","_self");
}
else
{
alert("Please enter correct pin");
}
}
</script>
Demo Of onkeyUp
.keyup()
I hope it will help you.
When document is loaded or ready you can do
$('#pwd').onkeypress = login();
to bind the login to the keypress handler of your pwd box.
When 'logged_in == true' You can do a 'window.location = "http://www.google.com"' to redirect to your target page.
I guess there should be some parameter (session id?) or similar to verify that the user not just used the url by hand.
After validating your login data, use Response.Redirect("YourPage.aspx", False). It will redirect you to the page you specified.
I have input field
<input type="text" name="vehicle_make[]" id="make1"/>
and i have help dropdown that updates this field if user choose to do so. I do it trough standard jquery code
$("#make1").val("value");
Problem is, since i use validate plugin to validate this field, if user click on validate before entering anything in that box, he will get notice that he needs to fill it, but then if he fills it trough dropdown, validate plugin will not detect it until user click on submit again.
I know i could call submit in function in which i process dropdown, but i think that it is not right solution, since i would need to check if validation is already done before doing that (since if it is not, it would start validation before i want it to start).
I also need to tie some other things to that field also, so i would like to know is there is a way in which i could write function so it always check if field is filled, even if user did not fill it directly.
Sorry if i didn't explain everything right, this is my first message here.
Try this
$("#make1").change(function(){
//do something there
});
I have found solution. First, i created js variable form_submitted, and added onclick event to submit button, to change value of variable form_submitted to yes. Then, i created function:
function update_validation(){
if(form_submitted == 'yes'){
$("#my_form").valid();
};
};
that i call when user do something that is not detected regularly with validate plugin. This function manually starts validation again, but only if it has been started before by clicking on submit.