Develop Reference

How to validate react select

I am using react-select for better look on UI, and I have implemented it, Now what I am trying to do is
I want to validate that input field when user clicks on Done button (form submit)
I am using react-hook-form for validation
They provide ref={register} which holds the input field value
so for normal input field or select I am able to use this like below
<label htmlFor="fname">
First Name
</label>
<input
type="text"
name="fname"
id="fnameid"
className="form-control"
ref={register({
required: 'First name is required',
})}
/>
{errors.fname && (
<div>
<span className="text-danger">
{errors.fname.message}
</span>
</div>
)}
Now the above is working fine but in case of react-select I do not know how to go forward
<Select
value={initailSelect}
onChange={(e) => onChangeAge(e)}
options={data}
/>
So here when I click on submit button it is only taking validation for fname and giving output on console for fname only
I tried doing like below
<Select
value={initailSelect}
onChange={(e) => onChangeAge(e)}
options={data}
ref={register({
required: 'age is required is required',
})}
/>
Code sandbox Here is my code sandbox My working code, Please check
Edit
I Tried This approach but it is not taking up defaultValue or Value, as I want to show one value selected, a nd in some cases I am getting values from server Which I want to show as selected.

Here is the link for codesandbox, you can either wrap the component in the Controller or use setValue to manually set values and validate
https://codesandbox.io/s/bitter-wave-w1cpi?file=/src/App.js:2084-2802
https://w1cpi.csb.app/
reference
https://react-hook-form.com/get-started#IntegratingwithUIlibraries

Vue js : can't change saved password in Chrome

i have an issue, i have a login page to my website, and when i'm connecting and click on "Save password" on Google Chrome, i can't change my password anymore:
My password field auto fill with the password of the mail, and when i try to enter another one (with the email still in the email field), but it keeps re auto fill with the old password (every second or so), here is my password input:
<input class="form-control" required name="password" :placeholder="$gettext('Password')" type="password" v-model="password">
I don't have any code or function that change the password model.
If someone have an idea from where it can come, i'll be really thankful.

How to disable the popup that appears for input validation ("Please fill out this field")?

I am using Angular 2 and I have a form with input as follows (simplified for readability's sake):
<input class="body-text1" type="text" [(ngModel)]="model.name" name="name" required minlength="1">
<!--more, similar inputs -->
I have my own angular validation, but the first input field gets a popup that is relevant to the input. For example, a plain text required input will receive a popup that says "Please fill out this field." while an input marked with type=email will say something like "Invalid email, must have #" (I forget the exact email popup text).
As far as I can tell, I did not add these popups in. I have tried adding formnovalidate / novalidate as attributes to the inputs based on a question that looked similar but it did not help.

You might need to add novalidate attribute to your form to prevent Browser default behaviour.
<form novalidate>

This popup shows because the required attribute is on the element. If you remove this, the popup will be gone, so will the validation be though.

Disabling HTML5 popup form validation messages

Let's say that i have in my form:
{{ Form::email('fieldname', null, array()) }}
I fill this input as following :
thisisntanemailadress
After clicking on the submit button, a popup appears and says that this is not a valid email address, which prevents my form to get submitted.
How can i disable/configure all popup messages like that, except using Form::text() ?

This isn't caused by Laravel. It's actually the browser attempting to validating the input fields value before allowing the user to submit the form. This is triggered when you use a HTML5 input type, these include email, url, number, tel, date, and several others.
The Form helper method you are using will generate the following HTML:
<input type="email" name="fieldname">
Most modern browsers will see the type="email" and attempt to validate any input before allowing you to submit the form.
If you don't want the browser to validate a specific field you can add the novalidate attribute to that fields input tag. For the form helper method you are using this can be done via the third parameter.
{{ Form::email('fieldname', null, array('novalidate'=> 'novalidate')) }}
Alternatively you can disable browser validation for an entire form by adding the novalidate attribute to the Form tag.
<form method="" action="" novalidate> ... </form>

Angularjs email validation without required

Title tells the problem shortly, I have a few email fields like so:
Email 1: <input type="email" name="email1" ng-model="emails.email1" />
<br />
Email 2: <input type="email" name="email2" ng-model="emails.email2" />
I am using following css to see the result:
input[type="email"].ng-invalid.ng-dirty {
background-color: #FA787E;
}
The problem is, validation doesn't fire unless I add required attribute. Inputs take classes "ng-valid ng-touched ng-dirty" when I input abc.
I don't want to put required attribute because I want them to be optional and be validated only if a user wants to fill an e-mail address. Is there a workaround for that?

In Angular 1.3 this is better supported. See the following page for details:
http://www.yearofmoo.com/2014/09/taming-forms-in-angularjs-1-3.html#html5-validators-and-parse-errors

You should be able to leverage the native angular validation methods:
For example with a form name of "form"
form.email1.$error.emails.email1
form.email2.$error.emails.email2
And the data methods:
{{!!form.$error.emails.email1}}
{{!!form.$error.emails.email2}}
From there, just mark the fields dirty and your styling should be applied.
Read more