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
Related
I'm trying to implement a registration form by using AngularJS. The form must prompt user for incorrect input while attempting submission.
I used uib-popover provided by UI Bootstrap to implement the popover function while clicking "save" button. Here is what I've done so far for the click button on the web page:
<button class="btn btn-primary" type="button" uib-popover =
"Wrong email format: {{formDetail.email_test}}" popover-title=
"{{errorMsgPopover.title}}" style="height:30px; padding:4px 12px;"
ng-click="beforeAndAfterDemo()">Save</button>
Now I can successully retrieve the data I want from the controller. It looks like the following:
However, what I wish to do is to implement form validation, and the popover should only be shown when given input is not correct.
Could you show me how to implement conditional uib-popover? Assume I already have some logic implement by JavaScript and I have put them all inside the controller.
Thank you.
You could either use the popover-enable property (which accepts true or false.
http://jsfiddle.net/3kpm2e0n/
Or you could have 2 buttons. One with the popover and the other without. Either one would be displayed with an ng-if
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
}
}
I am looking for a way with my form I am currently showing and hiding fields based on the values selected in the dropdowns, What I want to know is.
when i select yes and the field below displays I click submit on the form, if I return to the form the value is still present but the field is hidden again...
How can I prevent that from happening by default?
I want my browser to remember the jQuery change funtions state I left it at after I submit the form.
What you want to do is 'refresh fields visibility' in some cases. I suggest you to create such function refreshFieldsVisibility. Such function reads values from the dropdown and shows/hide the proper field. Then call your function:
When elements state is changed, with on('change') events.
When document is ready (this is your case as I understand), with $(document).ready
Any other situation if necessary
I have a login page with 2 radio buttons "new account" and "existing user". when "new account" is selected the "User" field auto populates with the text "New Account" and the "Password" field remains blank. I need to grey out the fields so that they are uneditable when the "new account" radio button is selected, but still pass along the information in the fields because it is used to gain access to the database. I can disable the fields to get the desired uneditable greyed out fields, but the information does not get passed along to the database.
I have tried to fix this by creating two hidden fields (which auto populate with the needed information for database access) to take the place of the "user" and "password" field which allows me to disable the visible fields while "new account" radio button is clicked and which still passes along the new user login info that never changes. This works fine until I try to login as an existing user, in which case my two hidden fields do not auto populate with the users input for their existing account information.
There may be a much simpler approach to fixing this problem, but all of my research and trials have not been successful yet. I have been reluctant to ask this question as it seems so simple and frequently used approach for a login page, but all of my searching has not yielded any thing that has worked yet. I appreciate any input or navigation in the right direction.
I'm pretty sure the correct and painless solution for your problem is to use two different form tags (take care to not nest them) and show/hide the form depending on the selected radio button.
And for the convenience of your user you should copy the username from one form to the other if he has already filled the user field and switches to the other version later.
EDIT
The complete solution:
HTML
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm1"> Form 1</label>
<label><input class="formSwitcher" type="radio" name="formSwitch" data-form="#divForm2"> Form 2</label>
<hr>
<div class="hiddenForm" id="divForm1">Put form 1 in here</div>
<div class="hiddenForm" id="divForm2">Put form 2 in here</div>
JS
// if someone clicks on one radio button
$('.formSwitcher').change(function(){
// get the form id we want to show (from the "data-form" attribute)
var formIdToChange = $(this).data('form');
// hide all forms first
$('.hiddenForm').hide();
// show the specific form
$(formIdToChange).show();
});
// initially hide all forms
$('.hiddenForm').hide();
// initially call the change method if one radio is already selected on page load
$('.formSwitcher:checked').change();
Are you saying that you need to change the existing user fields because they will grant access to the database? I think what you want to do is to change the properties of fields depending on what is selected. For example if you need the auto populate fields to be set when the user clicks new user then write something like
document.form.AutoPopUser.value="required value"
and when the person clicks on the existing user you can do
document.form.AutoPopUser.value=""
or if even having that part exist will mess up the existing user log in then you could delete that entire section by putting it inside a div and creating or destroying it depending on the selected option. I feel like I'm not being very clear but I think what you need is a clever set of onClick functions to get rid of things you dont need and add in the ones you do need. If you could post some code to go with this that would be awesome.
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.