PDA

View Full Version : سوال: فرم تماس با ما


com.mohsen
جمعه 11 آذر 1390, 08:15 صبح
با سلام
من یک قرم دارم به شکل زیر:

http://s2.picofile.com/file/7200628167/form.jpg


این هم کد اچ تی ام ال:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>فرم تماس با ما</title>
</head>
<body style="font-family:tahoma; font-size:12px;direction:rtl;">
<fieldset style="width:300px;">
<legend style="font-weight:bold;color:#0C3;">فرم تماس با ما</legend>
<p>پرکردن تمام فیلدها الزامی است.</p>
<form method="post" action="#" style="direction:rtl;">
<label style="display:block;margin:3px 0;">نام و نام خانوادگی:</label><input name="Name" type="text" /><br />
<label style="display:block;margin:3px 0;">پست الکترونیک:</label><input name="E-Mail" type="text" dir="ltr" /><br />
<label style="display:block;margin:3px 0;">موضوع:</label><input name="Title" type="text" /><br />
<label style="display:block;margin:3px 0;">پیام:</label><textarea name="Message" cols="25" rows="6" ></textarea><br />
<br />
<input type="submit" value="ارسال" style="font-family:tahoma;" /> <input type="reset" value="از نو" style="font-family:tahoma;" />
</form>
</fieldset>
</body>
</html>






بنده جاوا اسکریپت بلد نیستم
مخواستم بدونم چطور میشه وقتی همه فیلد ها پر شدند دکمه ارسال فعال بشه و اینکه اگر کاربر هر کدام از فیلد ها را خالی گذاشت یا اگر ایمیل را اشتباه وارد کرد در کنار همان (تکست فیلد) به او با رنگ قرمز نمایش دهد که فیلد را پر کنید یا ایمیل را به طور صحیح وارد کنید
متشکر
ravand
جمعه 11 آذر 1390, 09:19 صبح
اين كد براي پر كردن فيلد:

<script>
function valid()
{
var valid = false;
var t1 = document.getElementById('t1').value;
var t2 = document.getElementById('t2').value;
var t3 = document.getElementById('t3').value;
if(t1 != '' && t2 != '' && t3 != '')
{
valid = true;
}
if(valid == true)
{
document.getElementById('b').disabled = false;
}
else if(valid == false)
{
document.getElementById('b').disabled = true;
}
}
</script>
<input type="text" name="t1" id="t1" onkeyup="valid()" />
<input type="text" name="t2" id="t2" onkeyup="valid()" />
<input type="text" name="t3" id="t3" onkeyup="valid()" />
<input type="submit" name="b" id="b" disabled="disabled"/>
blackmak
جمعه 11 آذر 1390, 15:10 عصر
دوست عزیز این سئوال تو این تاپیک مطرح شد و جوابش هم هست. چرا تاپیک تکراری ایجاد میکنید ؟
http://barnamenevis.org/showthread.php?315168-%D9%85%D8%B4%DA%A9%D9%84-%D8%AF%DA%A9%D9%85%D9%87-submit&p=1384073#post1384073
اگه توی آخرین سورس مشکلی داشتید مطرح کنید
blackmak
جمعه 11 آذر 1390, 15:44 عصر
برای اینکه این کد ها کار کنه برید تو لینک زیر و کتابخونه jquery رو دانلود کنید و با نام jquery.js کنار فایلتون قرار بدبد.
http://code.jquery.com/jquery-1.7.1.min.js
اگه مشکلی پیش اومد یا سئوالی داشتید بپرسید . این سورس رو کامل کپی کنید چون من تو html اون هم تغییراتی دادم.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>فرم تماس با ما</title>
<script src="jquery.js" type="text/javascript"></script>
</head>
<script>
$(function()
{
function validateEmail(elementValue)
{
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailPattern.test(elementValue);
}
$('#b').click(function()
{
$('#t1').next('span').html('');
$('#t2').next('span').html('');
$('#t3').next('span').html('');
$('#email').next('span').html('');
var t1 = $('#t1').val();
var t2 = $('#t2').val();
var t3 = $('#t3').val();
var email = $('#email').val();
var valid = true;
if(t1 == '')
{
$('#t1').next('span').html(' فیلد را پر کنید');
valid = false;
}
if(t2 == '')
{
$('#t2').next('span').html(' فیلد را پر کنید');
valid = false;
}
if(t3 == '')
{
$('#t3').next('span').html(' فیلد را پر کنید');
valid = false;
}
if(validateEmail(email) == false)
{
$('#email').next('span').html(' ایمیل معتبر نیست');
valid = false;
}
if(valid == true)
{
document.forms['contact-form'].submit();
}

});
});
</script>
<body style="font-family:tahoma; font-size:12px;direction:rtl;">
<fieldset style="width:300px;">
<legend style="font-weight:bold;color:#0C3;">فرم تماس با ما</legend>
<p>پرکردن تمام فیلدها الزامی است.</p>
<form method="post" action="#" style="direction:rtl;" id="contact-form">
<label style="display:block;margin:3px 0;">نام و نام خانوادگی:</label><input name="Name" type="text" id="t1" /><span style="color:#F00"></span><br />
<label style="display:block;margin:3px 0;">پست الکترونیک:</label><input name="E-Mail" id="email" type="text" dir="ltr" /><span style="color:#F00"></span><br />
<label style="display:block;margin:3px 0;">موضوع:</label><input name="Title" type="text" id="t2" /><span style="color:#F00"></span><br />
<label style="display:block;margin:3px 0;">پیام:</label><textarea name="Message" cols="25" rows="6" id="t3" ></textarea><span style="color:#F00"></span><br />
<br />
<input type="button" value="ارسال" style="font-family:tahoma;" name="b" id="b" /> <input type="reset" value="از نو" style="font-family:tahoma;" />
</form>
</fieldset>
</body>
</html>

موفق باشید
ravand
جمعه 11 آذر 1390, 17:56 عصر
ببخشيد ميشه بگيد اين اعتبارسنجي با جي كوئري با همه ي مرورگر ها سازگار هست يا نه؟
آخه من با جاوا اسكريپت اعتبارسنجي ميكردم توي اكسپلورر مشكلي نداست ولي توي كروم و فايرفاكس فقط تا چند فيلد رو مي تونست اعتبارسنجي كنه و بقيه ي فيلد هايي كه كد اعتبارسنجي براشون گذاشته بودم كار نميكردن!
blackmak
جمعه 11 آذر 1390, 19:12 عصر
jquery یک کتابخانه از javascript هستش و اگه با دقت به سورسش نگاه کنید میبینید که چیزی جز جاوا اسکریپت نیست . پس هرجا js ساپورت بشه jquery هم ساپرت میشه.
من برای ie6 هم با jquery ایجکس و اعتبار سنجی با فیلد های زیاد ... نوشتم و مشکلی نداشته.
موفق باشید
blackmak
جمعه 11 آذر 1390, 19:17 عصر
به این سایت سر بزنید و قدرت jquery,html5,css3 رو ببینید :
Mr.doob (http://mrdoob.com/)
از مرورگر chrome استفاده کنید
رضا قربانی
جمعه 25 آذر 1390, 16:32 عصر
بهترین راه اینه که توسط خود پی اچ پی ورودی ها کنترل بشه. (با شرط و دستورات خاص)
ayub_coder
شنبه 26 آذر 1390, 13:22 عصر
به این سایت سر بزنید و قدرت jquery,html5,css3 رو ببینید :
Mr.doob (http://mrdoob.com/)
از مرورگر chrome استفاده کنید

عالی بود ولی اونطوری که توضیح داده بیشتر قسمتاش WebGL هستش.