jeudi 17 décembre 2020

React Javascript, form/ input validation not working

I am several inputs and checkboxs that all need to contain a value for the submit button to be enabled. Also the value they enter for name must not exist so I check it in an array using includes, I also tryed checking it using regex and that doesnt work either. For the regex it just doesnt work at all. For the includes method it works but the way my inputs are set up they are handled by onChange events, when changed they update a state variable and call a function that checks if they are empty, already exists or within a specific range I set for the number input. So if I want to type php and I type first letter p it run the includes method to check if "p" exists and it finds a p and says yep I found a "p" its true but thats not what I want, I want to check if the whole word exists in the array.

This is the regex I made up that doesnt seem to work.

let regex:RegExp = new RegExp(state_course_name, 'i');
        for(let i in technologies){
            console.log(technologies[i].name.match(regex));
               if(!!technologies[i].name.match(regex)){
                    return;
               }
        }

this is my function that checks the inputs everytime there is a change which doesnt work that great.

const checkFormInput = ():boolean => {
        state_form_Validation = true;
        let mybool:boolean;
        if(state_tech_name !== "" && state_tech_description !== "" && state_tech_courseArray.length > 0 && state_tech_difficulty > 0 && state_tech_difficulty < 6){
            for(let i in technologies){
                mybool = technologies[i].name.includes(state_tech_name);
                //console.log(state_course_name);
                if(technologies[i].name.includes(state_course_name)){
                    state_form_Validation = false; 
                }
                //console.log(mybool);
            }
        } else {
            state_form_Validation = true;
        }
        setState_form_validation(state_form_Validation)
        return state_form_Validation;
    };

here are examples of an input and onchange handler

<input name="editTechs" type="submit" disabled={!state_form_Validation} onClick={() => {submitAdd();history.push("/");}} 
                        value="Add"/>

const add_tech_name = (e:any):void => {
        setState_tech_name(e.target.value);
        checkFormInput();
    };

Any help on making this work properly would be great, thanks in advance!

Aucun commentaire:

Enregistrer un commentaire