Purposely invalidate the html5 form validator using dummy pattern

Question

I want to programatically set the input to invalid if specific condition is met e.g

<input type="text" required />

Lets take a variable isValid an example, if that is false, i want that bubble to show up with default browser bubble (onsubmit) and the custom error thats provided. So to add custom errors i figured the solition

<input 
    type="text" 
    required 
    oninvalid="this.setCustomValidity('Please Enter valid name')"
    oninput="setCustomValidity('')" 
/>

However this only check if its empty, the extra validation comes from a field called pattern however that regex, so I was thinking maybe do a pretty much all case regex when is 'isValid == true' else a regex that will fall everytime e.g. (react)

<input 
    type="text" 
    required
    pattern={isValid ? 'regex valid always' : 'regex fail always'}
    ...
/>

Could this even work? is there a better way that I'm not seeing?

Well, it might work better if you write pattern instead of patern, but what exactly are you trying to achieve? — ctwheels
@revo and empty strings bring back always valid, thats all i needed, thanks a lot. — Kivylius

Kivylius Kivylius · Accepted Answer · 2018-03-14T21:15:40

Thanks to @revo for his help got it working with just:

<input 
    type="text" 
    required
    pattern={isValid ? null : '(?!)'}
    ...
/>

Purposely invalidate the html5 form validator using dummy pattern

1 Answers