اذهب إلى المحتوى
  • 0

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

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

السؤال

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

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

// 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 حتى في صورة إدخال بيانات غير مطابقة.

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

شكرا. 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

يبدو أن المشكلة هي في الـ 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 من موسوعة حسوب

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...