الإنتقال لصفحة موالية إلا في صورة تحقق form alidation في الجافا سكريبت

محمود سعداوي2 · 27 أكتوبر 2022

السلام عليكم.

في الكود التالي:

// register-username-register-email-register-password-register-btn
let form            = document.querySelector('form')
let username        = document.querySelector(".register-username")
let email           = document.querySelector(".register-email")
let password        = document.querySelector(".register-password")
let confirmPassword = document.querySelector('.register-confirm-password')
let registerBtn     = document.querySelector(".register-btn")

// show input error message
function showError(input,message) {
    const formControl = input.parentElement
    formControl.classList = "form-control error"
    const small = formControl.querySelector('small')
    small.innerText = message
}
// show success outline
function showSuccess(input) {
    const formControl = input.parentElement
    formControl.classList = "form-control success"
}

// check email is valid
function checkEmail(input) {
    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if (re.test(input.value.trim())) {
        showSuccess(input)
    } else {
        showError(input, 'Email is not valid')
    }
}

// check passwords much
function checkPassword(input1, input2) {
    if (input1.value != input2.value) {
        showError(input2, 'Passwords do not much')
    }
}

// check required fields
function checkRequired(inputArr) {
    inputArr.forEach(function (input) {
        if (input.value.trim() === '') {
            showError(input, `${getFieldName(input)} is required`)
        } else {
            showSuccess(input)
        }
    })
}

// check input length
function checkLength(input, min, max) {
    if (input.value.length < min) {
        showError(input, `${getFieldName(input)} must be at least ${min}`)
    } else if(input.value.length > max){
        showError(input, `${getFieldName(input)} must be less than ${max}`)
    }
    else {
        showSuccess(input)
    }
}

// get field name
function getFieldName(input) {
    return input.id.charAt(0).toUpperCase() + input.id.slice(1)
}

// event listeners
form.addEventListener('submit', function(e){
    e.preventDefault()
    if (checkRequired([username,email,password,confirmPassword]) || checkLength(username, 4, 15) || checkLength(password, 6, 20) || checkEmail(email)){
		localStorage.setItem("register-username", username.value)
        localStorage.setItem("register-email", email.value)
        localStorage.setItem("register-password", password.value)
    }
    setTimeout(()=>{
        window.location = "./login.html"
    }, 1000)
})

يقع الذهاب إلى صفحة ./login.html حتى في صورة إدخال بيانات غير مطابقة.

ما أريده هو في صورة وجود بيانات غير مطابقة تظهر لي رسائل الخطأ أما في صورة تطابق البانات يقع المرور للصفحة الموالية.

شكرا.

عمر قره محمد · 27 أكتوبر 2022

يبدو أن المشكلة هي في الـ if الموجودة داخل الـ event listeners حيث انك تتوقع ان تعيد الوظائف قيمة صحيحة أو خاطئة ولكنك لم تقم بإعداد الوظائف لتعيد أي شيء.

وذلك لأن الوظيفة في حال لم تقم بإضافة return لها فإنها ستعيد undefined فمثلاً :

const myFunction = (a , b) => {
  cosnt c = a + b;
}
console.log(myFunction(4, 15)) // undefined ستعيد
// وبالتالي 
if(myFunction(4, 15)) { // undefined لن يتحقق الشرط أبداً لأن نتيجة الوظيفة هي 
  .
  .
  .
      
}

// بينما 
const myFunctionWithReturn = (a , b) => {
  cosnt c = a + b;
  return c;
}
if(myFunctionWithReturn(4, 15)) { // في هذه الحالة سيتحقق الشرط لأن الوظيفة ستعيد 60 
  .
  .
  .
      
}

ولذلك يجب ان تعيد من الوظيفة قيمة معينة (true أو false) أو ما ينوب عنها فمثلاً كل من "" (نص فارغ) و 0 و undefined و null كلها تعتبر false.

والمشكلة الثانية هي أنك كتبت الشرط كالتالي :

if(a || b || c){...}

وهذا يعني ان الشرط سيتحقق إذا كان واحد على الاقل من الـ a و b و c صحيحاً أي أنه إذا كان a صحيحاً ولكن b و c خطأ سيتحقق الشرط وسينفذ مابداخله.

ولكن الشكل الصحيح هو التالي :

if(a && b && c){...}

وفي هذه الحالة لن يتحقق الشرط حتى تكون a و b و c كلها صحيحة.

فيصبح الكود الخاص بك كالتالي :

// check email is valid
function checkEmail(input) {
	const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	if (re.test(input.value.trim())) {
		showSuccess(input)
		return true
	} else {
		showError(input, 'Email is not valid')
		return false
	}
}

// check passwords much
function checkPassword(input1, input2) {
	if (input1.value != input2.value) {
		showError(input2, 'Passwords do not much')
		return false
	} else {
		return true
	}
}

// check required fields
function checkRequired(inputArr) {
	let result = true;
	inputArr.forEach(function (input) {
		if (input.value.trim() === '') {
			showError(input, `${getFieldName(input)} is required`)
			result = false
		} else {
			showSuccess(input)
		}
	})
	return result;
}

// check input length
function checkLength(input, min, max) {
	if (input.value.length < min) {
		showError(input, `${getFieldName(input)} must be at least ${min}`)
		return false
	} else if (input.value.length > max) {
		showError(input, `${getFieldName(input)} must be less than ${max}`)
		return false
	}
	else {
		showSuccess(input)
		return true
	}
}

form.addEventListener('submit', function (e) {
	e.preventDefault()
	if (checkRequired([username, email, password, confirmPassword]) &&
		checkLength(username, 4, 15) &&
		checkLength(password, 6, 20) &&
		checkEmail(email)) {
		localStorage.setItem("register-username", username.value)
		localStorage.setItem("register-email", email.value)
		localStorage.setItem("register-password", password.value)
		setTimeout(() => {
			window.location = "./login.html"
		}, 1000)
	}
})

بعد قول كل هذا فإن استخدامك للـ js لعمل الـ validation قد صعب الموضوع كثيراً وذلك لأنه يوجد طريقة اسهل بكثير لعمل الـ validation وهي استخدام خصائص الـ input المبنية في html لاحظ المثال التالي :

<form>
      <label for="userName">first name :</label>
      <input
            type="text"
            id="userName"
            name="userName"
            required
            placeholder="enter your userName"
            minlength="6"
            maxlength="10"
      />
      <!-- الكود السابق يتأكد من كون المستخدم قد أدخل اسماً ومن أن طول هذا الاسم اكبر من 6 واصغير من 10-->
      <label for="userName">password :</label>
      <!-- الكود السابق يتأكد من كون المستخدم قد أدخل كلمة السر ومن أن طولها اكبر من 6 واصغر من 10-->
      <input
            type="password"
            id="password"
            name="password"
            placeholder="enter your password"
            min="6"
            max="25"
            required
      />
      <button>Submit</button>
</form>

اطلع اكثر على الخاصيات التي تستطيع اعطائها للـ input من موسوعة حسوب

محمود سعداوي2 · 27 أكتوبر 2022

بتاريخ 10 ساعات قال عمر قره محمد:

يبدو أن المشكلة هي في الـ if الموجودة داخل الـ event listeners حيث انك تتوقع ان تعيد الوظائف قيمة صحيحة أو خاطئة ولكنك لم تقم بإعداد الوظائف لتعيد أي شيء.

وذلك لأن الوظيفة في حال لم تقم بإضافة return لها فإنها ستعيد undefined فمثلاً :


const myFunction = (a , b) => {
  cosnt c = a + b;
}
console.log(myFunction(4, 15)) // undefined ستعيد
// وبالتالي 
if(myFunction(4, 15)) { // undefined لن يتحقق الشرط أبداً لأن نتيجة الوظيفة هي 
  .
  .
  .
      
}

// بينما 
const myFunctionWithReturn = (a , b) => {
  cosnt c = a + b;
  return c;
}
if(myFunctionWithReturn(4, 15)) { // في هذه الحالة سيتحقق الشرط لأن الوظيفة ستعيد 60 
  .
  .
  .
      
}

ولذلك يجب ان تعيد من الوظيفة قيمة معينة (true أو false) أو ما ينوب عنها فمثلاً كل من "" (نص فارغ) و 0 و undefined و null كلها تعتبر false.

والمشكلة الثانية هي أنك كتبت الشرط كالتالي :


if(a || b || c){...}

وهذا يعني ان الشرط سيتحقق إذا كان واحد على الاقل من الـ a و b و c صحيحاً أي أنه إذا كان a صحيحاً ولكن b و c خطأ سيتحقق الشرط وسينفذ مابداخله.

ولكن الشكل الصحيح هو التالي :


if(a && b && c){...}

وفي هذه الحالة لن يتحقق الشرط حتى تكون a و b و c كلها صحيحة.

فيصبح الكود الخاص بك كالتالي :


// check email is valid
function checkEmail(input) {
	const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	if (re.test(input.value.trim())) {
		showSuccess(input)
		return true
	} else {
		showError(input, 'Email is not valid')
		return false
	}
}

// check passwords much
function checkPassword(input1, input2) {
	if (input1.value != input2.value) {
		showError(input2, 'Passwords do not much')
		return false
	} else {
		return true
	}
}

// check required fields
function checkRequired(inputArr) {
	let result = true;
	inputArr.forEach(function (input) {
		if (input.value.trim() === '') {
			showError(input, `${getFieldName(input)} is required`)
			result = false
		} else {
			showSuccess(input)
		}
	})
	return result;
}

// check input length
function checkLength(input, min, max) {
	if (input.value.length < min) {
		showError(input, `${getFieldName(input)} must be at least ${min}`)
		return false
	} else if (input.value.length > max) {
		showError(input, `${getFieldName(input)} must be less than ${max}`)
		return false
	}
	else {
		showSuccess(input)
		return true
	}
}

form.addEventListener('submit', function (e) {
	e.preventDefault()
	if (checkRequired([username, email, password, confirmPassword]) &&
		checkLength(username, 4, 15) &&
		checkLength(password, 6, 20) &&
		checkEmail(email)) {
		localStorage.setItem("register-username", username.value)
		localStorage.setItem("register-email", email.value)
		localStorage.setItem("register-password", password.value)
		setTimeout(() => {
			window.location = "./login.html"
		}, 1000)
	}
})

بعد قول كل هذا فإن استخدامك للـ js لعمل الـ validation قد صعب الموضوع كثيراً وذلك لأنه يوجد طريقة اسهل بكثير لعمل الـ validation وهي استخدام خصائص الـ input المبنية في html لاحظ المثال التالي :


<form>
      <label for="userName">first name :</label>
      <input
            type="text"
            id="userName"
            name="userName"
            required
            placeholder="enter your userName"
            minlength="6"
            maxlength="10"
      />
      <!-- الكود السابق يتأكد من كون المستخدم قد أدخل اسماً ومن أن طول هذا الاسم اكبر من 6 واصغير من 10-->
      <label for="userName">password :</label>
      <!-- الكود السابق يتأكد من كون المستخدم قد أدخل كلمة السر ومن أن طولها اكبر من 6 واصغر من 10-->
      <input
            type="password"
            id="password"
            name="password"
            placeholder="enter your password"
            min="6"
            max="25"
            required
      />
      <button>Submit</button>
</form>

اطلع اكثر على الخاصيات التي تستطيع اعطائها للـ input من موسوعة حسوب

في هذه الحالة يعالج البيانات أولا بأول يعني يظهر رسالة الخطأ في أول خانة خاطئة و البقية جميعهم يقبلهم على أساس أنهم بيانات صحيحة حتى في حالة عدم التطابق.

الصورة توضح أكثر

Capture.JPG.df4185accf224394a33193124d597185.JPG

مثلما تبين الصورة الإيميل غير مطابق و لكن لاتظهر رسالة الخطأ إلا إذا قمنا بإصلاح التي قبلها.

الإنتقال لصفحة موالية إلا في صورة تحقق form alidation في الجافا سكريبت

السؤال

محمود سعداوي2

2 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

محمود سعداوي2

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية