لحل مشكلتك، يجب عليك تعديل الدالة submitClick() في الجافا سكريبت لتحقق مما إذا كانت كل حقول النموذج ممتلئة قبل عرض الرسالة. يمكنك القيام بذلك بإضافة التحقق من قيم حقول النموذج داخل الدالة submitClick() قبل عرض الرسالة.
لتحقيق هذا، يجب عليك تعديل الدالة submitClick() لتحديد ما إذا كانت جميع حقول النموذج قد تم ملؤها بشكل صحيح. يمكنك القيام بذلك عن طريق فحص قيم حقول النموذج والتأكد من أنها ليست فارغة. إذا كانت جميع الحقول ممتلئة بشكل صحيح، يتم عرض الرسالة.
اليك الكود المعدل:
htmlhtml>
<html>
<head>
<title>JS Validation for other types of form input fieldstitle>
<script type="text/javascript">
function submitClick() {
if (formValidation()) {
alert("Thank you for your time! Your details have been submitted!");
}
}
function formValidation() {
var flag = true;
if (document.myForm.user_name.value == "") {
alert("Please fill in your Name!");
flag = false;
}
// Validate letters only as Name
if (!/^[a-zA-Z]*$/g.test(document.myForm.user_name.value)) {
alert("Enter alphabetic characters as Name!");
flag = false;
}
// Validate emails
if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.user_email.value)) //Regular expressions to validate email
{
alert("Enter Valid Email Address!");
flag = false;
}
// Validate Phone number
if (document.myForm.user_phone.value == "") {
alert("Please fill in your Phone Number!");
flag = false;
}
if (!/^[0-9]*$/g.test(myForm.user_phone.value)) {
alert("Enter numeric values as Phone Number!");
flag = false;
}
if ((document.myForm.userGender[0].checked == false) && (document.myForm.userGender[1].checked == false)) {
alert("Please select your gender!");
flag = false;
}
if (document.myForm.userAge.selectedIndex == 0) {
alert("Please select your Age from the drop-down list!");
flag = false;
}
if (document.myForm.termsAndConditions.checked == false) {
alert("Please check the Terms and Conditions box!");
flag = false;
}
return flag;
}
script>
head>
<body bgcolor="#FFFFFF">
<form name="myForm" method="post" onSubmit="return formValidation();">
<h1>Please fill out your details below:h1>
<p>Name: <input type="text" name="user_name">p>
<p>Email: <input type="text" name="user_email">p>
<p>Phone: <input type="text" name="user_phone">p>
<p>Gender: <input type="radio" name="userGender" value="Male">Male
<input type="radio" name="userGender" value="Female">Femalep>
<p>Age:
<select name="userAge">
<option value="">Please select your age:option>
<option value="0-17 years">0-17 yearsoption>
<option value="18-29 years">18-29 yearsoption>
<option value="30-40 years">30-40 yearsoption>
<option value="40-64 years">40-64 yearsoption>
<option value="65+ years">65+ yearsoption>
select>
<p>Please tick the checkbox if you agree with our Terms and Conditions:
<input type="checkbox" name="termsAndConditions" value="Yes"> Yes
<p><input type="submit" name="send" value="Submit Details" onClick="submitClick()">p>
form>
body>
html>
بهذا التعديل، الرسالة ستظهر فقط عندما تكون جميع حقول النموذج ممتلئة بشكل صحيح وتتوافق مع الشروط المطلوبة.
المزيد من المعلومات
بالطبع، ها هو استكمال المقال:
في الكود أعلاه، تم إجراء بعض التعديلات على الدوال الموجودة في الجافا سكريبت لتحقيق الوظيفة المطلوبة. دعونا نلقي نظرة على التغييرات التي تم إجراؤها:
-
دالة
submitClick(): تم تعديل هذه الدالة لتحقق من صحة حقول النموذج قبل عرض الرسالة. إذا كانت جميع الحقول ممتلئة بشكل صحيح وتتوافق مع الشروط المحددة، فسيتم عرض الرسالة “Thank you for your time! Your details have been submitted!” باستخدام الدالةalert(). -
دالة
formValidation(): هذه الدالة تقوم بالتحقق من صحة قيم حقول النموذج. إذا كان أي من الحقول فارغًا أو لا تتوافق مع الشروط (مثل عدم اختيار الجنس أو عدم وضع علامة على مربع الشروط والأحكام)، فإن الدالة ستقوم بإظهار رسالة تنبيه للمستخدم تطلب منه ملء الحقول بشكل صحيح.
باستخدام هذا التعديل، سيتم التحقق من صحة البيانات المدخلة قبل إرسالها، وسيتم عرض الرسالة فقط عندما تكون جميع الحقول ممتلئة بشكل صحيح وتتوافق مع الشروط المحددة.
هذا يضمن تقديم تجربة مستخدم محسنة، حيث لا يتم عرض الرسالة إلا بعد التحقق من صحة البيانات، مما يساهم في تقديم تجربة أفضل للمستخدم وتحسين دقة البيانات المدخلة.
