a form after validate must go to next author page with vue-Router using this code but not validate

  <form @submit.prevent="validate">

            <div class="row">
              

                <div class="col-md-4 mb-3">
                    <label>Name</label>
                    <input type="search" class="form-control" placeholder="" v-model.lazy.trim="form.nameTitle">
                    <div class=" text-danger">
                        {{ form.titleNameErrorText }}
                    </div>
                </div>
               

            <div class="row mt-4">
                <div class="col-6 ">
                    <button class="btn btn-primary btn-style" type="submit" @click.stop.prevent="submit()">Submit
                        </button>
                </div>

            </div>
        </form>

js code and vue router handle next page after validation////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<script>
import { reactive } from "vue";
import { useRoute, useRouter } from 'vue-router'
export default {
    setup() {
        const router = useRouter();
        const form = reactive({
            nameTitle: "", 
            titleNameErrorText: "",
            name: "FormAddress",

        });

        function validate() {

            if (form.nameTitle.length < 3) {
                form.titleNameErrorText = "Number is 3 More..   "
            }
            else {
                form.titleNameErrorText = ""
            }
        }

        function submit() {
        
            router.push('/MapView')
            
        }
        return { form, validate,submit }
    },

}

</script>

submit go to map page and no validate this current page im handle validate page and success form element next page else stay this page////////////////////////////////////////////////////////