آفلاین
user-avatar

چگونگی استفاده از preventDefault و غیرفعال کردن آن

1 هفته پیش
توسط حسام موسوی آپدیت شد
آفلاین
user-avatar
محسن مهری ( 41107 تجربه )
3 هفته پیش
تخصص : برنامه نویس back-end با زبان php framework laravel

درود - روزتون بخیر
دوستان من نیاز دارم تا ارسال فرم رو کنترل کنم و مسلما اومدم از preventDefault برای جلوگیری از ارسال فرم استفاده کردم اما نمیدونم حالا چطور این رو بی اثر کنم. چطور میشه این رو غیر فعال کرد تا بالاخره فرم ارسال بشه ؟‌!
توضیح بیشتر : دو تا تابع تعریف کردم یکی برای stop کردن ارسال فرم و یکی برای run کردن دوباره ارسال فرم اما تابع دومی یعنی ( غیر فعال کردن preventDefault کار نمیکنه ؟)

stopSendForm(form){
        console.log('run stopSendForm')
        form.addEventListener("click",event=>{
            event.preventDefault();
        });
    }

    allowSendForm(form){
        console.log('run allowSendForm')
        // ?? how we delete listener click on function stopSedForm ???
        // ?? and how delete event.preventDefault() ???
        /*this.form.addEventListener("click",event=>{
            return true;
        });*/
    }
بهترین پاسخ انتخاب شده توسط محسن مهری
آفلاین
user-avatar
محسن مهری
2 هفته پیش

سلام ممنون بله در آخر سر به این روش مشکلم رو حل کردم

 this.form.addEventListener("submit",event=>{
            if(this.run()){
                event.preventDefault()
            }
            else{
              this.form.submit();
            }
        })

تابع run وظیفه اش اینه که بررسی کنه خطایی در فرم هست یا نه

آفلاین
user-avatar
jp ( 6544 تجربه )
3 هفته پیش

چیزی که معلوم نیست از این کد های شما
چند حالت داره یا تابع stopsend صدا زده نشده یا دکمه submit درست تعریف نشده .

آفلاین
user-avatar
میلاد-م ( 233175 تجربه )
2 هفته پیش
تخصص : طراح رابط کاربری - Front-End

درست متوجه منظورتون نشدم، ولی فکر می کنم اینها میتونه شما رو به جواب سوالتون برسونه:

https://stackoverflow.com/questions/1164132/how-to-reenable-event-preventdefault/1164177#1164177

https://www.w3schools.com/jsref/met_form_submit.asp
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit

آفلاین
user-avatar
محسن مهری ( 41107 تجربه )
2 هفته پیش
تخصص : برنامه نویس back-end با زبان php framework laravel

@jp... @milad
سلام ممنون از پاسخ هاتون دوستان عزیز - دوست عزیز آقا میلاد روش هایی که شما معرفی کردین برای اینه که ما کدهامون رو بر اساس submit پیاده سازی کنیم .اما من یک فایل js ساختم که اولین کاری که میکنه اینه که از ارسال فرم جلوگیری میکنه و همش داره به input ها ( و در واقع به هر تغییری توی اون فرم) گوش میده و هر زمانی که دید مشکلات توی اون فرم حل شد باید اجازه ارسال فرم رو بده - نه اینکه فرم رو ارسال کنه - بلکه اجازه ارسال فرم رو بده
به هر حال باز هم خلاصه کد هام رو میزارم شاید متوجه شدید و تونستین بهم کمک کنین

class validation{
    constructor(idForm,inputsAndValidations)
    {
        // add listener for everyThing changes in form
        document.getElementById(idForm).addEventListener("keydown",event=>{
            this.run();
        })
        this.stopSendForm(this.form)
    }

    stopSendForm(form){
        console.log('run stopSendForm')
        form.addEventListener("click",event=>{
            event.preventDefault();
        });
    }

    allowSendForm(form)
    {
        console.log('run allowSendForm')
        // ?? how we delete listener click on function stopSedForm ???
        // ?? and how delete event.preventDefault() ???
        /*this.form.addEventListener("click",event=>{
            return true;
        });*/
    }

    run()
    {
        let errorIsOrNot=false;
        console.log('run started')
        // ... do somethings....

        if(!errorIsOrNot)// if(errorIsNot==false)
        {
            this.allowSendForm(this.form);
        }
    }

}
// define
let validate = new validation(
    'formPasswordForget'
    ,
    {
        'phone':'required|numeric',
        'email':'required|email'
    }
);

توضیح خلاصه : اومدم یک کلاس تعریف کردم خیلی خیلی از کدهاش رو پاک کردم تا خوانا تر بشه اما چیزی که مهم اینجاست اینه
اخر کدهارو مشاهده کنین میاییم یک ابجکت از این کلاس میسازیم و اون ابجکت هم میاد دو تا کار خیلی مهم توی تابع سازندش انجام میده

  • میاد شروع میکنه گوش دادن به هر تغییری که توی اون فرم ایجاد شد و هر تغییری که ایجاد شد تابع run رو فراخونی میکنه
  • همچنین اولین کاری که میکنیم از ارسال فرم جلوگیری میکنیم .
    و متد اصلی یعنی run میاد میبینه اگه مشکلی نبود باید با یک تابع دیگه " جلوگیری از ارسال فرم یعنی تابع stopSendForm " رو غیرفعال کنه که اینکارو باید توی تابع allowSendForm انجام بده .
    من کدهام مشکلی نداره به درستی این کلاس داره کار میکنه ( البته گفتم خیلی از کدها و توابع کلاس رو پاک کردم اینجا) فقط همین مبحث مونده
آفلاین
user-avatar
علی بیات ( 389638 تجربه )
2 هفته پیش
تخصص : توسعه دهنده ارشد وب

وقتی از preventDefault استفاده میکنی، مسلما فرم دیگه ارسال نمیشه..

کاری که میتونی انجام بدی اینه که به فرمت یه ID بدی

<form id="myForm">

و هر زمان خواستی فرم submit بشه از طریق جاوااسکریپت این کار رو انجام بدی

let form = $("#myForm")
form.submit();
آفلاین
user-avatar
میلاد-م ( 233175 تجربه )
2 هفته پیش
تخصص : طراح رابط کاربری - Front-End

به همین سادگی می تونی بنویسی:

form.addEventListener("submit", e => {
    if(validate(form) === true) form.submit();
    else e.preventDefault();
});
آفلاین
user-avatar
میلاد-م ( 233175 تجربه )
2 هفته پیش
تخصص : طراح رابط کاربری - Front-End

آقا میلاد روش هایی که شما معرفی کردین برای اینه که ما کدهامون رو بر اساس submit پیاده سازی کنیم .اما من یک فایل js ساختم که اولین کاری که میکنه اینه که از ارسال فرم جلوگیری میکنه و همش داره به input ها ( و در واقع به هر تغییری توی اون فرم) گوش میده و هر زمانی که دید مشکلات توی اون فرم حل شد باید اجازه ارسال فرم رو بده - نه اینکه فرم رو ارسال کنه - بلکه اجازه ارسال فرم رو بده.

شما یک فرم داری، این فرم زمانی که دکمه ارسال زده میشه، براساس اعتبار سنجی، دو ادامه می تونه براش رخ بده:
الف) اعتبارسنجی مثبت هستش، فرم ارسال بشه.
ب) اعتبارسنجی منفی هستش، فرم ارسال نشه.

نکته ش اینه که: اجازه دادنی و ندادن نداریم. ما زمانی واسه مون ارسال فرم مهم هستش که کاربر بخواد فرم رو ارسال کنه. اگه نخواد ارسال کنه، دیگه اجازه داشتن/نداشتن اهمیتی نداره. / بنابراین هر وقت که ارسال کرد، شما اعتبارسنجی می کنید و اگه معتبر بودش، ارسالش می کنید. اگرم نبود، ارسال نمی کنید.

آفلاین
user-avatar
محسن مهری ( 41107 تجربه )
2 هفته پیش
تخصص : برنامه نویس back-end با زبان php framework laravel

سلام ممنون بله در آخر سر به این روش مشکلم رو حل کردم

 this.form.addEventListener("submit",event=>{
            if(this.run()){
                event.preventDefault()
            }
            else{
              this.form.submit();
            }
        })

تابع run وظیفه اش اینه که بررسی کنه خطایی در فرم هست یا نه

آفلاین
user-avatar
محسن مهری ( 41107 تجربه )
2 هفته پیش
تخصص : برنامه نویس back-end با زبان php framework laravel

سلام - همین سوال رو در سایت stackoverflow مطرح کردم و یکی از دوستان این جواب رو گذاشته و فک کنم بهترین جواب هستش

  • چون دقیقا چیزی که من میخام هستش - یعنی اینکه اجازه دادن یا ندادن یک فرم رو مدیریت کنیم نه اینکه در زمان زدن روی دکمه فرم این مبحث رو بررسی کنیم
let idForm = 'formPasswordForget';
let form = document.getElementById(idForm);
function stopSubmit(evt) {  
    event.preventDefault();  
}
function stopSendForm(form) {  
    console.log('run stopSendForm');  
    form.addEventListener("submit", stopSubmit);  
}
function allowSendForm(form) {  
    console.log('run allowSendForm');  
    form.removeEventListener("submit", stopSubmit);  
}
function switchState(evt) {  
    if (event.target.checked) {  
        stopSendForm(form);  
    } else {  
        allowSendForm(form);  
    }  
}
آفلاین
user-avatar
میلاد-م ( 233175 تجربه )
2 هفته پیش
تخصص : طراح رابط کاربری - Front-End

@mohsen.mehri6101
کدهاتون رو درست قرار ندادید. لطفا تصحیح نمایید.

و اینکه تابع switchState کجا داره اعمال میشه؟ کدهای html رو هم بزارید.

آفلاین
user-avatar
محسن مهری ( 41107 تجربه )
2 هفته پیش
تخصص : برنامه نویس back-end با زبان php framework laravel

@milad
سلام اقا میلاد بفرمایین.لینکش و عکس
توضیح تصویر رو وارد کنید

برای ارسال پاسخ باید وارد سایت شوید