Develop Reference

React Multi Step Form Submit and Validation

So I have a form inside a master page, where it will render different textbox, or radio box, or date picker, etc. On every click of next button and back button, it will either go to the next component or prev component, and save the whole form.
Pretend data model will look like this
{field: [{textbox1: texbox1value}, {datepicker1: datepicker1value}]
Given a pseudocode more or less like this.
ContainerPage.ts
<form>
renderComponent(listOfComponent) // this will switch based on the link
<button back>
<button next>
</form>
Component1.ts
<input textbox>
Component2.ts
<input datepicker>
I was able to get it going to save, but wondering how do you validate the input if the button is on the parent component?
I'm following this site more or less but it does not have validation
https://css-tricks.com/the-magic-of-react-based-multi-step-forms/
I also saw some site develop it in such a way the form is on each component instead of the master page. but ended up using 1 form.

Theres are some ways to handle that. My favorite way is to add a callback function to the form-component that will be called when the validation of the form is changed.
So you never need to check the validation of the form from outside of the component and everywhere you need that form you got the validation state.
Look at that example
https://codesandbox.io/s/charming-glitter-10db0
here we has two components App and Form
Form: Here we handle all the fields and validations
App: Here we got the callback of the validation state and we are able to print a error message or disable the buttons

html5 required attribute to fire jquery event

I am making a form in which I am using required attribute on its elements. Now consider the following situation-
The form is divided in two tabs say General Details and Additional Details. So while submitting the form if I leave the required field blank on the visible tab then user can view the message. But suppose user is on first tab and error comes on second tab then User cannot view the error popup and he is clueless about why the form is not submitting.
Now I am searching for a way a jQuery event can be fired, whenever the required attribute error comes.
So on this event I can program to show the tab on which the error comes.
Please note I know I can use the JS/jQuery based form validation but the main thing is that, this form is being generated by Grails and the required field is auto-applied depending on the database. So I cannot use per form based JS validation.

See how the required field is selected with the :invalid pseudo class:
jQuery(document).ready(function(){
jQuery('button').on('click',function(){
jQuery('input:invalid').css('background-color', '#F00');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="required test">
<input type="text" required="required" />
<button>click</button>
</form>
You could simply check for the fields visibility, and if not given traverse up to the parent tab, give the parent tab a class which marks the tab label as containing something invalid.

One way is to use submit button and call myValidationFunction() method of JavaScript as action. (action="myValidationFunction();").
Other way is to use button and call myValidationFunction() method of JavaScript as on Click event of that button. After that, inside myValidationFunction(), you can use checkValidity() method to check validity of form at once or particular element and run your custom code to shift on particular tab if there is error to show to the user. function myValidationFunction() {
if ( $('#myInput')[0].checkValidity() ) {
// code to move to the particular tab
}
}

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 .

calling javascript function on ice:panelConfirmation's cancle

There is a commandButton on my jsf page, and when user clicks on it, I am showing an ice:panelConfirmation to confirm before sending data to actionListern of that commandButton.
Now, I want to disable this button when user selects cancel on my ice:panelConfirmation.
I think I have to do something to call a JavaScript function when user selects cancel.
How can I do that?

Here is a sample of how this taglib works : ICEfaces Showcase. But the generated code is not really nice.
<input class="iceCmdBtn" id="j_idt3344:j_idt3347" name="j_idt3344:j_idt3347" onblur="setFocus('');" onclick="new Ice.PanelConfirmation(this,event,'j_idt3344:genConfirm',true,false,false,'/xmlhttp/blank',function(event){iceSubmit(form,this,event);return false;});return false;" onfocus="setFocus(this.id);" type="submit" value="Generate a Random Number">
It seems to be hard to handle event on these generated components, because of generated ids. I will recommend you to use Jquery-ui. It is very easy to use and very powerfull.

It seems bit tricky, or some times it depends on other requirements/necessity.
at last I found ace:confirmationDialog where I could use action listeners on both 'accept' and 'reject' button. :)

One form, multiple submit buttons and submit links [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Multiple submit buttons in an HTML form
I have web form with multiple submit buttons. To determine which button was pressed, each has a different name, like so:
<input type="submit" name="foo" value="Foo Foo">
On the form there are also normal links that act as submit buttons, like so:
<a href="" onclick="parentNode.submit();return false;">
Bar
</a>
How do I also distinguish between the links being used as submit buttons?
I am not sure if this is relevant:
Here is the start of the form
<form action="foobar" method="post" enctype="multipart/form-data">
I am using Flask (a micro-framework based on Werkzeug) which uses Python (2.6 in this case).

My first question would be to ask if you need that many distinct ways to submit the same form? This sounds like your design should be changed up to make it more simplistic for the user, which will in turn solve your issue.
If you absolutely HAVE to have all the different submit buttons/links and need to know which one was pressed, use something like:
<input type="hidden" id="submitClicked" />
<input type="submit" onclick="javascript:document.getElementById('submitClicked').value='linkName';return true;" id="linkName">Submit</input>
NOTE: I didn't test this code, it was just off the top of my head, and thus some modification may be needed.

You can create a hidden input called submitSource, and set the value of that as you wish from the link or button onclick event handlers. Then you can check that value server-side.

Another solution you should consider: Use <ìnput type="submit"> for "submit links" just like the normal submit buttons and use CSS to style them to look like links.
This has the two huge advantages that it will (a) work with out any extra code that could potentiality break and will (b) work on every single browser on this world.

RedFilter's answer is certainly a solid way to go, but here's another option for you:
I normally use one name for all my submit buttons ("command" or similar), since of course only one of them is ever sent. Then my server-side code just looks at the value of that field to figure out what to do.
Your submit links could append a "command" parameter to the form's action, e.g.:
<a href="" onclick="parentNode.action += "?command=bar"; parentNode.submit(); return false;">
Even if you don't want to use just one name, the concept still holds, e.g.:
<a href="" onclick="parentNode.action += "?bar=bar+bar"; parentNode.submit(); return false;">
Of course, if you do either of the above and your form uses POST rather than GET (as most forms do), then whether you get the parameter value from the same source on the server will depend on what server-side mechanism you're using. For instance, Java's ServletRequest#getParameter method doesn't care, it looks in both the GET and POST data, whereas with some other technologies more of a distinction is drawn. Not a problem, you just have to be sure you're getting from the right place.

I would recommend instead of using onclick="parentNode.submit();return false;" that you create a js function that all links call to perform the submit. Then you could use a hidden field or get variable or whatever to transfer the link's id.
function submitMe(linkID)
{
document.getElementById("hfWhichButtonSubmittedMe").value = linkID;
document.getElementById(linkID).parentNode.submit();
return false;
}
...
blah blah