التوجه نحو الرابط الخارجي بعد النقر من المرة الثانية

محمود سعداوي2 · 8 أبريل 2023

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

في الكود التالي يقع التوجة للرابط الخارجي إلا بعد النقر مرتين.

لماذا.

الكود:

  // form validation
  const [validate, setValidate] = useState([])
  const [validMessage, setValidMessage] = useState(false)
  const user_regex = /^[A-Za-z]{3,10}$/;
  const password_regex = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,20}$/;
  const email_regex = /^(([^<>()\[\]\\.,;:\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,}))$/;

  const validated = () => {
    return <ValidateMessage/>
  }

  const formValidation = () => {
    const validate = []
    if (!user_regex.test(values.username)) {
      validate.push("Username should be 3-10 characters and shouldn't include ni special character ni numbers ni spaces!")
    }
    if (!email_regex.test(values.email)) {
      validate.push('Invalid email: The email should be like aaa@aa.aa')
    }
    if (!password_regex.test(values.password)) {
      validate.push("Password should be 8-20 characters and include at least 1 letter, 1 number and 1 special character!")
    }
    setValidate(validate)
    if (validate.length === 0) {
      setValidMessage(true)
    }
  }

  const handleClick = (e) => {
    e.preventDefault();
    formValidation()
    if (validMessage) {
      setTimeout(() => window.open("https://github.com/Saadaoui-Forkan/react-forms/tree/main/responsive_form", '_self'), 1500)
    }
  }

شكرا جزيلا.

Adnane Kadri · 8 أبريل 2023

يحدث مثل هذا السلوك لأن النقرة الأولى يتم فيها تحديث حالة المتغير validMessage الى true كون البيانات صحيحة وبشكل متزامن يتم التحقق من قيمة المتغير validMessage التي هي أصلا false ولا يتم تنفيذ عبارة الشرط أصلا لهذا الأخير. ففي النقرة الثانية تكون قيمة validMessage هي قيمة بوليانية صحيحة ويتم التوجيه بشكل طبيعي. ولتوكيد هاته الجزئية، جرب في الضغطة الأولى ان تكون البيانات صحيحة، ثم قبل الضغطة الثانية اجعل البيانات غير صحيحة ولا تطابق المنطق المتحقق منه في دالة formValidation. ورغم ذلك سيتم التوجيه الى الصفحة الموصوفة.

لتلافي مثل هاته المشكلة، ستحتاج التوجيه اما من داخل دالة التحقق او استعمال عائد الدالة في شرط التوجيه، أمثلة صحيحة:

const formValidation = () => {
    const validate = []
    if (!user_regex.test(values.username)) {
      validate.push("Username should be 3-10 characters and shouldn't include ni special character ni numbers ni spaces!")
    }
    if (!email_regex.test(values.email)) {
      validate.push('Invalid email: The email should be like aaa@aa.aa')
    }
    if (!password_regex.test(values.password)) {
      validate.push("Password should be 8-20 characters and include at least 1 letter, 1 number and 1 special character!")
    }
    setValidate(validate)
    if (validate.length === 0) {
      setValidMessage(true)
    }
    return validMessage;
  }

  const handleClick = (e) => {
    e.preventDefault();
    const isValid = formValidation()
    if (isValid) {
      setTimeout(() => window.open("https://github.com/Saadaoui-Forkan/react-forms/tree/main/responsive_form", '_self'), 1500)
    }
  }

أو:

const formValidation = () => {
    const validate = []
    if (!user_regex.test(values.username)) {
      validate.push("Username should be 3-10 characters and shouldn't include ni special character ni numbers ni spaces!")
    }
    if (!email_regex.test(values.email)) {
      validate.push('Invalid email: The email should be like aaa@aa.aa')
    }
    if (!password_regex.test(values.password)) {
      validate.push("Password should be 8-20 characters and include at least 1 letter, 1 number and 1 special character!")
    }
    setValidate(validate)
    if (validate.length === 0) {
      setValidMessage(true)
    }
    if (validMessage) {
      setTimeout(() => window.open("https://github.com/Saadaoui-Forkan/react-forms/tree/main/responsive_form", '_self'), 1500)
    }
  }

  const handleClick = (e) => {
    e.preventDefault();
    formValidation()
  }

وكل منهما صحيح.

Mustafa Suleiman · 8 أبريل 2023

يتم توجيه المستخدم إلى الرابط الخارجي بعد النقر مرتين لأنه يتم استخدام الحالة الجديدة "validMessage" التي تعيد قيمة "true" عندما يكون لا يوجد أي رسائل خطأ في التحقق من الصحة. وبعد ذلك، يتم تأجيل فتح الرابط الخارجي لمدة 1.5 ثانية باستخدام setTimeout().

بالتالي، عند النقر على زر الإرسال، يتم التحقق من صحة البيانات المدخلة في الحقول، وإذا كانت جميع الحقول صالحة، يتم تعيين القيمة "true" لـ validMessage، ويتم فتح الرابط الخارجي بعد مرور 1.5 ثانية. إذا لم يكن هناك أي رسائل خطأ وتم النقر مرة أخرى، سيتم توجيه المستخدم مرة أخرى إلى الرابط الخارجي.

يمكن تعديل الكود لتوجيه المستخدم مباشرةً إلى الرابط الخارجي عند النقر على زر الإرسال في حالة كانت جميع الحقول صالحة، دون الحاجة إلى النقر مرتين. يمكن فعل ذلك بتحرير الدالة handleClick كما يلي:

const handleClick = (e) => {
  e.preventDefault();
  formValidation()
  if (validate.length === 0) {
    window.open("https://github.com/Saadaoui-Forkan/react-forms/tree/main/responsive_form", '_self');
  }
}

تم تعديل الشرط في الدالة handleClick من if (validMessage) إلى if (validate.length === 0) ، حيث تم استخدام المتغير validate الذي يحتوي على الأخطاء المحتملة المكتشفة من قبل formValidation. وعلاوة على ذلك، تم تحرير setTimeout() من الكود حيث لم يعد هناك حاجة لهذا المؤخر الزمني.

وبمجرد تحقق صحة الحقول وعدم وجود رسائل خطأ في المتغير validate، سيتم توجيه المستخدم مباشرة إلى الرابط الخارجي. في حالة كان هناك أي رسائل خطأ، لن يتم توجيه المستخدم إلى الرابط الخارجي.

محمود سعداوي2 · 9 أبريل 2023

بتاريخ 12 ساعة قال Mustafa Suleiman:

validate.length === 0

تم التوجه للرابط الخارجي دون التحقق من البيانات

بتاريخ 12 ساعة قال Adnane Kadri:
يحدث مثل هذا السلوك لأن النقرة الأولى يتم فيها تحديث حالة المتغير validMessage الى true كون البيانات صحيحة وبشكل متزامن يتم التحقق من قيمة المتغير validMessage التي هي أصلا false ولا يتم تنفيذ عبارة الشرط أصلا لهذا الأخير. ففي النقرة الثانية تكون قيمة validMessage هي قيمة بوليانية صحيحة ويتم التوجيه بشكل طبيعي. ولتوكيد هاته الجزئية، جرب في الضغطة الأولى ان تكون البيانات صحيحة، ثم قبل الضغطة الثانية اجعل البيانات غير صحيحة ولا تطابق المنطق المتحقق منه في دالة formValidation. ورغم ذلك سيتم التوجيه الى الصفحة الموصوفة.

لتلافي مثل هاته المشكلة، ستحتاج التوجيه اما من داخل دالة التحقق او استعمال عائد الدالة في شرط التوجيه، أمثلة صحيحة:
const formValidation = () => {
    const validate = []
    if (!user_regex.test(values.username)) {
      validate.push("Username should be 3-10 characters and shouldn't include ni special character ni numbers ni spaces!")
    }
    if (!email_regex.test(values.email)) {
      validate.push('Invalid email: The email should be like aaa@aa.aa')
    }
    if (!password_regex.test(values.password)) {
      validate.push("Password should be 8-20 characters and include at least 1 letter, 1 number and 1 special character!")
    }
    setValidate(validate)
    if (validate.length === 0) {
      setValidMessage(true)
    }
    return validMessage;
  }

  const handleClick = (e) => {
    e.preventDefault();
    const isValid = formValidation()
    if (isValid) {
      setTimeout(() => window.open("https://github.com/Saadaoui-Forkan/react-forms/tree/main/responsive_form", '_self'), 1500)
    }
  }
أو:
const formValidation = () => {
    const validate = []
    if (!user_regex.test(values.username)) {
      validate.push("Username should be 3-10 characters and shouldn't include ni special character ni numbers ni spaces!")
    }
    if (!email_regex.test(values.email)) {
      validate.push('Invalid email: The email should be like aaa@aa.aa')
    }
    if (!password_regex.test(values.password)) {
      validate.push("Password should be 8-20 characters and include at least 1 letter, 1 number and 1 special character!")
    }
    setValidate(validate)
    if (validate.length === 0) {
      setValidMessage(true)
    }
    if (validMessage) {
      setTimeout(() => window.open("https://github.com/Saadaoui-Forkan/react-forms/tree/main/responsive_form", '_self'), 1500)
    }
  }

  const handleClick = (e) => {
    e.preventDefault();
    formValidation()
  }
وكل منهما صحيح.

للأسف نفس المشكل

التوجه نحو الرابط الخارجي بعد النقر من المرة الثانية

السؤال

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

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

Adnane Kadri

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية