Develop Reference

How to validate only one captcha on a page

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.

What is the external URL for this <a> tag

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 .

Interact with web page using javascript injection in a Safari Extension

I'm very new to developing Safari Extensions and I don't know any java, css or html.
I've been searching round the web for a way to interact with a website using javascript injection. Specifically, I wish to fill out two forms; a username and a password and then press the 'login' button.
I've learned that I need to use something like document.getElementById() and .click and .value, but I really don't know how to connect the dots.
Any help is much appreciated!
Kind regards, Tokke

I will assume that when you say two forms, username and password you mean two text inputs, and then submit the form.
What you should do, is:
Select each text input and change its value attribute.
Submit the form
Could be done with the following code, assuming that your form has an id="my-form", your username input has id="username" and your password input has id="password".
document.getElementById("username").value = "myusername"; // Select and fill username input
document.getElementById("password").value = "mypassword"; // Select and fill password input
document.getElementById("my-form").submit(); // Submit the form

Activation of the HTML5 Pattern Attribute with websockets

As a total newbie to web-based programming, I'm having trouble understanding why the pattern attribute field below fails to check the validity of the text field due to my javascript.
<form id="aForm">
<input type="text" pattern="^[ a-zA-Z0-9,#.-]+$" id="address" title="Standard address"/>
<input type="submit" id="open" value="Start"/>
</form>
The form contents are then sent to a javascript file which then sends it to the server via a websocket as in the code fragment below. However it ignores validating the form through the pattern attribute.
$(document).ready(function() {
$("#open").click(function(evt) {
evt.preventDefault();
var form = $('#aForm').serialize();
webSocket = new WebSocket("ws://localhost:9999/mh");
webSocket.onopen = function()
{
webSocket.send(form);
};
REST OF CODE....
It seems that for some reason this prevents the text from being checked before it's sent. I would like to know why and how to ensure that the form is validated by the pattern attribute.
Thanks

The HTML5 form validation is only performed when you're trying to actually submit the form, or when you explicitly use JavaScript to validate it1.
Since your JavaScript is bound to a different event (button click), form validation is not performed at that point. You can solve this by:
binding your submission to the form's submit event instead of button click, or
using the form validation API at the very beginning of your script.
I strongly recommend the first option. It makes more semantic sense and works right when the form is submitted though other methods (I don't remember if the button click will be simulated when someone presses Enter in the text field, and it definitely won't be triggered if JavaScript calls $('#aForm').submit() programmatically...).
1 At least, those are the only places I noticed - it's possible there are other events/circumstances when validation is done as well.

How to implement my idea of a JavaScript form?

I have worked mostly with Python so far, so I'm a newbie when it comes to JavaScript. Now I need the latter to implement a form. I have some ideas and requirements in mind and would like you to tell me how to start and which frameworks or tools to use.
My requirements are:
The server-side logic will be implemented in Python and Django.
The entire form is located on a single webpage.
The overall design of the webpage should be done with Twitter Bootstrap.
When the page has been loaded, only the first field of the form is displayed.
When this field has been filled and validates correctly, display the second field of the form below the first field
When a new field gets displayed, its webpage should scroll down automatically if necessary, so that the new field gets centered in the browser. The scrolling should occur with some nice animation.
My form also includes some fields of type ChoiceField. Each choice has its own set of additional settings which will be implemented as form fields as well. Once a particular choice has been made, only the respective set of settings should be displayed but not all settings for all choice fields at the same time. (Can I probably do this with a simple if-else structure?)
When all fields have been displayed, filled and validated and the form has been submitted, the server does some computations. The results of these computations should be displayed below the entire form, once they are ready. The webpage should again scroll down automatically to the results. The best would be to scroll down the webpage to an extent where the form is not visible anymore but only the results. So this is probably dependent on the size of the currently opened browser window.
I know that all of this is possible and I've also seen forms like that from time to time but don't have a concrete example at the moment. I also know that all of this is possible with JavaScript. Can I implement all of the above with JQuery or do I need additional tools? It would be great if a JavaScript expert guided me a bit through this mess inside my mind. Thank you in advance!

Make it work
Before doing anything with javascript make a normal form that works. I.e. generate a form using whatever server side language you want, and when you submit the form it should do what you want it to do. If you have a form that works without javascript you have the confidence that it'll always work if the js breaks.
Make it work better/ Progressive Enhancement
There look to be 2 or 3 requirements for your js - treat them all individually:
1. The form should show only one input at a time
E.g. with markup like this:
<form id="myForm" method="post">
<legend>My Awesome Form</legend>
<div class="question">
<label for="x">X</label>
<input name="x" id="x">
</div>
<div class="question">
<label for="y">Y</label>
<input name="y" id="y">
</div>
<div class="question">
<label for="z">Z</label>
<input name="z" id="z">
</div>
<div class="submit"><input type="submit" value="Submit"></div>
</form>
Use some js like this:
$('.question', '#myForm').not(':first-child').hide();
$('input', '#myForm').change() {
var div, next;
div = $(this).parent();
next = div.next();
if ($(this).val() && next.length) {
parent.hide();
next.show();
}
});
Which would show only one of the question divs at a time, and show the next one (if there is a next one) when the input is filled.
2. Validate user input
To validate the user input, create a function that does that for you, returning true/false as appropriate and hook that into your js so that it doesn't continue if the input value is deemed invalid:
validate(field, input) {
var valid = false;
// implement your logic here to validate input
if (valid) {
return true
}
return false;
}
$('input', '#myForm').change() {
var div, next;
if (!validate($('this').attr('name'), $(this).val()) {
return;
}
div = $(this).parent();
next = div.next();
if ($(this).val() && next.length) {
parent.hide();
next.show();
}
});
That will prevent the user from moving onto the next input, if the current one has an invalid value.
3. Submitting the form by ajax
Clicking submit should send the form data to the server, in (almost) the same ways as submitting the form normally. the only difference should be that it response with either a json response that you parse, or a snippet of html that you dump at the end of the page:
$('#myForm').submit(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data, textStatus, jqXHR) {
// handle success response
},
error: function(jqXHR, textStatus, errorThrown)) {
// show the user an error
}
});
});
All of the js written here is untested, it should give you some ideas about how to tackle each aspect of what you want to do - of course, for more information of any particular method refer to the docs.

All of this can be done with jQuery, you shouldn't need any additional JS tools.
Since you have a lot of functionality to build out, I'm not going to go into details. However, I can provide some insight into how to go about each step of your process.
1.) Thats fine.
2.) Thats fine too, you just need one html page to accomplish this.
3.) I would recommend having all forms created in HTML with a CSS of display none. Then as the user progresses through, you can use .show() to "show" the hidden elements.
4.) Probably going to want to have a "next" button of some kind outside of your form. Use .click() To trigger a function that does whatever form validation you require on the value of the input form field. You can use .next() to cycle through your form inputs.
5.) If you want a browser scroll use scrollTop or the jQuery ScrollTo Plugin. If your just looking to move things on the screen and not truely scroll, use .animate()
6.) You will have to set the value on the fly as a user progresses. So use .change() to do the detection.
7.) Before submitting, run your validator on all the fields again to ensure you have all correct data. You'll want to use .ajax() to make the request to your service and prevent default on the actual form submit. Take the response you get back from the service and format the information accordingly.
That should give you insight on how to accomplish your project. Good Luck!