Develop Reference

Pass a field in required when a radio button value is clicked

Basically I am using react hook form, I want to trigger a field to be required if I click a specific value in my radio button. Obviously it is dynamic so there could be anything in the radio button. I want to get the selected value from the radio and then depending on the selected value trigger another field to be required.
I have no clue on how to do it with react hook form; mayne someone has come across the same issue and have an example to show me

you can use validate function from react hook form
<input
{...register("test", {
validate:{ required: value => getValues().radioBtn }
})}
/>

You can follow these steps:
trigger a function once your desired radio button was clicked.
get hew value How to get value from radio button
set the attribute 'required' to true 'Required' attribute
let me know if that helps you

Why ng-invalid class added with input if i reset the input component to default value?

I have input with type date in angular form and rendered with the default value(For ex: "1/1/2019").
Based on the sources on form reset, when we reset a form, the value of the form elements will reset to its initial value.
So, in this case, if i reset my angular form, the form's input element retains its original value. But, even the valid value is present in the input element.
ng-invalid class gets added to the input element?
Also, I have another doubt.
Please, check this sample below.
https://stackblitz.com/edit/angular-krw9jz-f5c7af?file=index.html
Here, i have used inputs for representing angular ngmodel binding and an normal JS input element with value attribute.
I have set the value for the two elements initially. So, as per the JS reset form standard, the initial given value retains. But, in angular the value of input changes null when resetting the form.
Please, let me know why this weird behavior followed in angular form?

k-textbox input in html create event template not reflecting value change in javascript (kendo scheduler)

I have an html input that has the k-textbox class to make it a kendo styled input textbox:
<input id="LocationInput" class="k-input .k-textbox" data-bind="value:location"/>
Then, when I open the create event popup (which is where the location input text box is located) and I have a user specified parameter for LocationInput with a value they wish to autofill....
I do $('#'+paramData[i].fieldName+'Input').val(paramData[i].recordId);
where paramData is an array of passed parameters, fieldName would be 'Location' and recordId would be its value. After this, the text is set correctly in the console when checked with console.log, but no changes are reflected in the create event popup, the box is still empty. I tried adding a '.change()' after the '.val()' but that didn't do anything either.
How can I get the 'k-textbox' input to reflect the value I set it to in the javascript when the input is part of the create event template?

To find the input you should search within the container element of the event object that gets passed to your handler:
function yourSchedulerAddOrEditEventHandler(e) {
e.container.find('#'+paramData[i].fieldName+'Input').val(paramData[i].recordId);
e.container.find('#'+paramData[i].fieldName+'Input').trigger("change");
}
See here for more info http://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#events

Angular ng-model with required

I'm trying to create a simple input with html5 "required". I'm using placeholder, so I'd like the initial value of the input to be empty. I have the input bound to a ng-model that is initialized as empty (so the placeholder shows).
When I go to the page, it shows that input is required for the , which shouldn't show unless the user submits the form and the input is empty.
how can I do this:
<input type="text" required ng-model="name">
..in controller:
$scope.name = "";
and not have the form think I am submitting an empty input?

One way of only validating when the user has actually interacted with your input element is to use $dirty to determine wether to show your error message. e.g.
<span ng-show="form.name.$dirty && form.name.$error.required">
Name is required
</span>

I just created an example of form validation regarding to your question
This should be working:
http://plnkr.co/edit/6PTNg3atPHAjL0XFtvWj?p=preview

Using div's instead of select's

Hello I've implemented a custom select following this instructions:
http://www.onextrapixel.com/2012/06/20/create-a-custom-select-box-with-jquery/
It is based on using div's and span instead of select's and option. My question is, how can I make the form get this values?
Do I need to make hidden select and assign to it the div-select value every time?

Add a hidden input somewhere in form, say
<input type="hidden" name="foo">
Then add this line to the jQuery snippet
$(this).find('span.selectOption').click(function(){
$(this).parent().css('display','none');
$(this).closest('div.selectBox').attr('value',$(this).attr('value'));
$(this).parent().siblings('span.selected').html($(this).html());
$('input[name="foo"]').val($(this).html());
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
});
Basically, whenever an option is clicked it will update the field named "foo" which stores the name of the selected option.

You can use a hidden select that matches the selected value, or just a hidden input with the updated value. Either way, to be included in the form submission, it must be a input, textarea or a select with a name attribute.