miladpqb

2 سال پیش توسط miladpqb مطرح شد

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

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

ثبت پرسش جدید

رضارضا

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

برای اعتبار سنجی یک 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

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

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

سلام

کد زیر تا تمام 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 انجام بدید

ارسال پاسخ

miladpqb

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

ممنون از شما

ارسال پاسخ

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

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

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

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

گزینش سوالات

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

دسته ‌بندی سوالات

تگ‌های محبوب

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