I am finding that when I use validation rules and require my fields, that the input field stays red after I first enter invalid data and then enter the correct data…
Are you using both custom validation in your code as well as using the required field option in the settings already in Wix Editor?
Plus, if you have entered invalid inputs one time and then enter the correct inputs the next time, then yes it will probably be stuck at red frames.
This is probably purely because on the first time you have entered invalid inputs on form submission, therefore the form displays the error settings which in your case are the red frames for example.
Now this won’t change when you enter the correct inputs the next time, as until you press the submit button to process the new inputs, then the form will still be showing the results of the last form submission.
If you don’t want the red frames on invalid inputs, then take off the required fields option in the settings in Editor and have a hidden text box which only shows on an invalid input which says something like wrong username, email or password for example.
If you connect your user input form to your dataset via the submit button, then you can utilise the already setup passed and failed messages within the submit settings, this will automatically add a hidden worked or failed message in green and red and you can change the text to whatever you want it to say.
https://support.wix.com/en/article/working-with-user-input-validation-in-the-settings-panel
https://support.wix.com/en/article/corvid-about-validating-user-input-with-code
https://www.wix.com/corvid/reference/$w.ValidatableMixin.html
I am using required field and regex in the wix editor. The problem is that validation seems to occur onBlur the first time (when invalid text is entered), but doesn’t re-check onBlur after entering the correct information.
@givemeawhisky thoughts ?
Is the onBlur effect simply for when the input is invalid?
If it is, then when you enter the correct inputs then the onBlur effect should not happen.
So the scenario -with my wix code commented out is:
Enter a username that is too short according to regex - field goes red when I move to the password field. I go back, make the username the correct length move to the password field and the username field remains red.
Yes, as all you are doing is checking for the length, so it will be red the first time as it is too short, however until you click on the submit button and process the new inputs to see whether they are valid or invalid, your user input form is still displaying the previous inputs results.
I’ve just remembered this from a old forum post which had a reply from the grandmaster Wix Admin Yisrael 
His reply on that forum:
The built-in validation uses preset rules which will “mark” the element (usually with a red border) if the value is invalid. You can also check the validity status yourself. Take a look at $w.TextInput.valid as an example. The example code included under this API…
let isValid = $w("#myElement").valid;
…can be used to check the validity of the element’s value wherever you need. You could check it in the onChange() function of the element, or in the onClicked() routine of a button on the page.
In event handlers (such as onKeyPress, OnBlur), introducing a slight delay using setTimeout should solve the problem.
For example:
export function input1_blur(event, $w) {
setTimeout(() => {
console.log("after timeout: " + $w("#input1").value);
}, 10);
}
I hope this helps,
@givemeawhisky That did it! The only last issue is how do I reset the input field back to it’s original color and get rid of the red ?
@mike63762
You can add a reset button to your form, here is a tutorial for a form on your page.
The Elements
The Page
User Inputs:
First Name Field: #input1
Last Name Field: #input2
Email Field: #input3
Phone Field: #input4
Course Name: #dropdown1
Course Date: #dropdown3
Course Timing: #dropdown2
Button Element:
Submit Button: #Submit
Reset Button: #Reset
The Database
Create a database Courses (dataset1).
Recommended fields:
First Name ID: fname
Last Name ID: lname
Email ID: email
Phone ID: phone
Course Type ID: course
Course Date ID: date
Course Timing ID: time
Email ID: email
The Code
Page Code
// Reset Button //
export function Reset_click(event, $w) {
$w('#input1').value = "";
$w('#input2').value = "";
$w('#input3').value = "";
$w('#input4').value = "";
$w('#dropdown1').value = "Select Course";
$w('#dropdown2').value = "Select Timing";
// Reset validation - Otherwise fields will show error //
$w('#input1').resetValidityIndication();
$w('#input2').resetValidityIndication();
$w('#input3').resetValidityIndication();
$w('#input4').resetValidityIndication();
$w('#dropdown1').resetValidityIndication();
$w('#dropdown2').resetValidityIndication();
}
//#dropdown3 (date) will be pre populated based on what course is picked, however you can add it to the reset if you wanted to.
Or a simpler way, just use $w(’ #dataset1 ').setFilter() to clear it.
You can have a CLEAR button that resets the fields in the onClick() function.
To clear all of your filter selections, add the following onClick() function to your CLEAR button:
export function button1_click(event, $w) {
//Add your code for this event here:
$w("#selection1").selectedIndex = 0;
// add code for other selection menus
}
The above routine just needs to set all of the selection menus to the default value.
Or you can clear the user input box when the page is ready:
$w.onReady( function() {
$w("#userinput").value="";
} );
"This is probably purely because on the first time you have entered invalid inputs on form submission, therefore the form displays the error settings which in your case are the red frames for example.
Now this won’t change when you enter the correct inputs the next time, as until you press the submit button to process the new inputs, then the form will still be showing the results of the last form submission."
This should be fixed
This is an old post and is being closed. If you have further questions please open up a new thread instead of bumping up old posts.