اعتبارسنجی اطلاعات فرم

با سلام .
من به تعداد چند عدد input روی سایت طراحی کردم و میخوام کاری کنم که اگر یکی از این Input ها خالی بود اجازه انجام داده نشود .
چون تعداد اinpu هارو کاربر تعیین میکند . پس از یک عدد تا بی نهایت میشه input داشت .
ایا میشه با if و else این کار رو انجام داد . یا با روش دیگری انجام بدم؟

جاوااسکریپت

miladpqb

@milimaximus1374

ثبت پرسش جدید

پاسخ‌ها

رضارضا

@Reza_liction3 سال پیش مطرح شد

برای اعتبار سنجی یک input می توان از کد زیر استفاده کرد.

<!DOCTYPE html>
<html>
<body>

<p dir="rtl">لطفا بدون اینکه چیزی درون باکس زیر وارد نمایید بروی دکمه ارسال کلیک نمایید</p>

<form action="#" method="get">
 Name: <input type="text" oninvalid="MyMessage();" required>
 <input type="submit" value="ارسال">
</form>

<script>

function MyMessage(){
 alert('تکمیل کردن این مورد ضرروی می باشد');
}

</script>

</body>
</html>

آیا منظور شما این بود؟!

ارسال پاسخ

saman khoshghadam

@thethinkerdev3 سال پیش مطرح شد

تخصص: برنامه نویس وب

سلام

کد زیر تا تمام input ها بررسی نشن و پر نباشن اجازه submit شدن form رو نمیده :

    <form>
        <div>
            <label for="">Name:</label>
            <input type="text">
        </div>
        <div>
            <label for="">LastName:</label>
            <input type="text">
        </div>
        <div>
            <label for="">Code Melli:</label>
            <input type="text">
        </div>
        <div>
            <label for="">Age:</label>
            <input type="number">
        </div>
        <button>submit</button>
    </form>

const form = document.querySelector('form')
const inputElements = form.querySelectorAll('input');

const button = form.querySelector('button')

form.addEventListener('submit', (formEvent) => {
    formEvent.preventDefault()

    let errors = 0
    inputElements.forEach(el => {
        navigateOnAllInputs(el) ? null : ++errors;
    })

    //Submit it, if there is no error:
    if (errors === 0) {
        formEvent.target.submit()
    }
})

//Input Typing :

inputElements.forEach(el => {

    //if input changed:
    el.addEventListener('input', ({
        target
    }) => {
        navigateOnAllInputs(target)
    })

    //the input leaved:
    el.addEventListener('focusout', ({
        target
    }) => {
        navigateOnAllInputs(target)
    })

})

function navigateOnAllInputs(target) {
    if (target.value === "") {
        target.classList.add('error')
        return false;
    } else {
        target.classList.remove('error')
        return true;
    }
}

form {
  display: flex;
  flex-flow: column;
  gap: 10px;
}
input {
  border: none;
  border-radius: 4px;
  outline: none;
  padding: 4px;
  box-shadow: 0 0 3px 0.5px darkgrey;
}
button {
  width: 200px;
  border: none;
  border-radius: 5px;
  outline: none;
  padding: 20px 50px;
  box-shadow: 0 0 1px 0.1px gray;
}

input.error {
  border: 1px solid red;
}

بخش validation رو خیلی میشه روش وقت گذاشت مثلا بر اساس type بررسی کنه اگه email بود validation واقعی انجام بده که میتونید برید دنبالش چطوریه
قطعا سمت بک‌اند هم باید validation انجام بدید

ارسال پاسخ

شاید پاسخ شما همین‌جا باشد

@milimaximus13743 سال پیش مطرح شد

ممنون از شما

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

اعتبارسنجی اطلاعات فرم

پاسخ‌ها

گفتگوهای مرتبط

بررسی وارد شدن حداقل اطلاعات

اعتبارسنجی

آپلود عکس با لاراول صورت پیشرفته

اضافه کردن یک آبجکت از vue به اطلاعات فرم در لاراول

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید