مشکل در اعتبار سنجی فرم ها

[ABZiko]

سلام، بنده کد زیر رو برای اعتبار سنجی فرمم نوشتم که اگر مقادیر وارد شده نادرست بود، یک متنی رو بنویسه :


<script type="text/javascript">

function firstNameValidate(formName,firstName) {
var reg = /[a-zA-Z]/;
var address = document.forms[formName].elements[firstName].value;
if(reg.test(address) == false) {
document.getElementById('firstNameError').innerHTM L='Your First Name Invalid !';
return false;
}
}

</script>

این هم فرم من هست :


<form method="POST" action="Initial.php" enctype="multipart/form-data" name="registrationForm" onsubmit="return firstNameValidate();">
<h2>All Fields Required ! (Except Avatar)</h2><br />
<label>Please Enter Your First Name :</label><div class="input-control text" data-role="input-control">
<input type="text" placeholder="First Name ..." name="firstName" onblur="return firstNameValidate('registrationForm','firstName');">
<button class="btn-clear"></button>
</div>
<div id="firstNameError"></div><br />
</form>



ولی مشکلم اینه که اگر مقادیر رو هم کاربر اشتباه وارد کرد، فرم می تونه submit بشه و اطلاعات رو ثبت کنه، حالا چطور می تونم کاری کنم که اگر مقادیری اشتباه وارد شده بود، فرم رو ارسال نکنه؟

[Omid Jackson]

سلام، بنده کد زیر رو برای اعتبار سنجی فرمم نوشتم که اگر مقادیر وارد شده نادرست بود، یک متنی رو بنویسه :


<script type="text/javascript">

function firstNameValidate(formName,firstName) {
var reg = /[a-zA-Z]/;
var address = document.forms[formName].elements[firstName].value;
if(reg.test(address) == false) {
document.getElementById('firstNameError').innerHTM L='Your First Name Invalid !';
return false;
}
}

</script>

این هم فرم من هست :


<form method="POST" action="Initial.php" enctype="multipart/form-data" name="registrationForm" onsubmit="return firstNameValidate();">
<h2>All Fields Required ! (Except Avatar)</h2><br />
<label>Please Enter Your First Name :</label><div class="input-control text" data-role="input-control">
<input type="text" placeholder="First Name ..." name="firstName" onblur="return firstNameValidate('registrationForm','firstName');">
<button class="btn-clear"></button>
</div>
<div id="firstNameError"></div><br />
</form>



ولی مشکلم اینه که اگر مقادیر رو هم کاربر اشتباه وارد کرد، فرم می تونه submit بشه و اطلاعات رو ثبت کنه، حالا چطور می تونم کاری کنم که اگر مقادیری اشتباه وارد شده بود، فرم رو ارسال نکنه؟

کد شما (http://jsbin.com/banehi/edit?html,js,output)
شما فراخوانی تابع رو گذاشتین روی تکست باکس، من گذاشتم روی باتون و با رویداد کلیک، یک پارامتر هم به عنوان ایونت ارسال کردم، وقتی کلیک میشه رو باتون مقدار تکست باکسی که گفتین گرفته میشه و مقدارش چک میشه بعد به نسبت اون شرط اجرا میشه، فقط به جای return false باید از preventDefault استفاده بشه، دلیل گرفتن ایونت از ورودی هم همین بود
اگر کد کار نمیکرد در قسمت output روی run with js کلیک کنید

[ABZiko]

ممنون، این راه رو بلد بودم، ولی مشکل اینجاست که این کد برای یک textbox کار می کنه، اگر چند تا textbox دارم، چطوری توی onsubmit بنویسم که همه رو چک کنه؟

[Omid Jackson]

ممنون، این راه رو بلد بودم، ولی مشکل اینجاست که این کد برای یک textbox کار می کنه، اگر چند تا textbox دارم، چطوری توی onsubmit بنویسم که همه رو چک کنه؟

چیزی که من متوجه شدم از حرفای شما (http://jsbin.com/banehi/edit?html,js,output)، این کاره ولی خب این 2 باره کاری میشه، اگر اسم ها ثابته و از این تابع یه بار استفاده میشه فقط برای چک کردن مقادیر، فکر میکنم بهتر باشه همه ی اسم ها توی همون تابع تعریف بشه، هربار کلیک کنه اسامی که تعریف شده به عنوان مقادیر گرفته میشه، یا یه پیشنهاد دیگه دارم که تا نیم ساعت یا یک ساعت دیگه میام کد رو میذارم

[ABZiko]

ممنون، یعنی به جای چند تابع برای هر Input بیام از یک تابع استفاده کنم، درست؟ خب حالا باید چطوری بنویسمش؟:لبخند:

[ABZiko]

آقا من اینو اینطوری نوشتم :


<script type="text/javascript">

function formValidate(formName,firstName,lastName,userName, passWord,mail) {
var reg = /[a-zA-Z]/;
var address = document.forms[formName].elements[firstName].value;
if(reg.test(address) == false) {
document.getElementById('firstNameError').innerHTM L='Your First Name Invalid !';
return false;
}
var address = document.forms[formName].elements[lastName].value;
if(reg.test(address) == false) {
document.getElementById('lastNameError').innerHTML ='Your Last Name Invalid !';
return false;
}
var regTwo = /^[A-Za-z0-9_]{1,15}$/;
var address = document.forms[formName].elements[userName].value;
if(regTwo.test(address) == false) {
document.getElementById('userNameError').innerHTML ='Your Username Invalid !';
return false;
}
var regThree = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$/;
var address = document.forms[formName].elements[passWord].value;
if(regThree.test(address) == false) {
document.getElementById('passWordError').innerHTML ='Your Password Invalid !';
return false;
}
var regFour = /^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$/;
var address = document.forms[formName].elements[mail].value;
if(regFour.test(address) == false) {
document.getElementById('mailError').innerHTML='Yo ur E-Mail Invalid !';
return false;
}
}

</script>


و این هم HTML:


<form method="POST" action="Initial.php" enctype="multipart/form-data" name="registrationForm" onsubmit="return formValidate('registrationForm','firstName','lastN ame','userName','passWord','mail');">
<h2>All Fields Required ! (Except Avatar)</h2><br />
<label>Please Enter Your First Name :</label><div class="input-control text" data-role="input-control">
<input type="text" placeholder="First Name ..." name="firstName">
<button class="btn-clear"></button>
</div>
<div id="firstNameError"></div><br />
<label>Please Enter Your Last Name :</label><div class="input-control text" data-role="input-control">
<input type="text" placeholder="Last Name ..." name="lastName">
<button class="btn-clear"></button>
</div>
<div id="lastNameError"></div><br />
<label>Please Enter Your Username :</label><div class="input-control text" data-role="input-control">
<input type="text" placeholder="Username ..." name="userName">
<button class="btn-clear"></button>
</div>
<div id="userNameError"></div><br />
<label>Please Enter Your Password :</label><div class="input-control text" data-role="input-control">
<input type="password" placeholder="Password ..." name="passWord">
<button class="btn-clear"></button>
</div>
<div id="passWordError"></div><br />
<label>Please Enter Your E-Mail :</label><div class="input-control text" data-role="input-control">
<input type="text" placeholder="E-Mail ..." name="mail">
<button class="btn-clear"></button>
</div>
<div id="mailError"></div><br />
<label>Please Choose Your Avatar (Just PNG, JPG Or GIF):</label><div class="input-control file" data-role="input-control">
<input type="file" name="file" />
<button class="btn-file"></button>
</div>
<input type="submit" value="Submit" class="bg-amber" style="color: #FFF" />
<input type="hidden" value="addUser" name="user" />
</form>


ولی کار نمی کنه و مقادیر رو ارسال می کنه، مشکل از چیه؟

[Omid Jackson]

http://jsbin.com/redeve/edit?html,js,output
موقع اجرا قبلش run with js رو بزنین
شما تابع رو با کلیک بر روی submit میخونین، ایونت رو میگیرین، میاد همه ی مقادیر رو میگیره چک میکنه، اگر (حتی یکی از اونا) درست نبودن submit نمیکه با event.preventDefault
قرار نیست چیزی برگردونه، کلا باید اون رویدادش از کار بیفته
به جای button هم از input و از نوع button استفاده کنین

[ABZiko]

تشکر فراوان !!! خیلی کمک کردید.