مشکل در خالی بودن یک input

[ABZiko]

سلام، بنده کد زیر رو برای چک کردن خالی بودن یا نبودن کد ام نوشتم :



function CheckEmpty(){
if(document.getElementById('nameFamily').value === ''){
document.getElementById('nameFamily').style.border ="2px solid red";
return false;}
else{
document.getElementById('nameFamily').style.border ="";}

if(document.getElementById('mail').value === ''){
document.getElementById('mail').style.border="2px solid red";
return false;}
else{
document.getElementById('mail').style.border="";}

if(document.getElementById('phone').value === ''){
document.getElementById('phone').style.border="2px solid red";
return false;}
else{
document.getElementById('phone').style.border="";}

if(document.getElementById('building').value === ''){
document.getElementById('building').style.border="2px solid red";
return false;}
else{
document.getElementById('building').style.border="";}

if(document.getElementById('text').value === ''){
document.getElementById('text').style.border="2px solid red";
return false;}
else{
document.getElementById('text').style.border="";}

if(document.getElementById('width').value === ''){
document.getElementById('width').style.border="2px solid red";
return false;}
else{
document.getElementById('width').style.border="";}

if(document.getElementById('height').value === ''){
document.getElementById('height').style.border="2px solid red";
return false;}
else{
document.getElementById('height').style.border="";}

if(document.getElementById('number').value === ''){
document.getElementById('number').style.border="2px solid red";
return false;}
else{
document.getElementById('number').style.border="";}}



(در رویداد onBlur)
کار می کنه ولی مشکل اینجاست که اگر اولین Input خالی بمونه و دومی هم خالی بمونه یا ...، می آد به همون اولی گیر می ده تا ما اون رو تصحیح کنیم و بعدش می ره سراغ دومی و Border اون رو قرمز می کنه، ولی من می خوام که هر کردوم که خالی موند، بیاد border اش رو قرمز کنه، حالا باید چی کار کنم؟(یک سوال دیگه هم داشتم، چطوری می تونم این دستور رو هم برای OnBlur و هم برای Onsubmit استفاده کنم که اگر فیلد ها خالی بود فرم رو ارسال نکنه؟)
ممنون

[ABZiko]

<form name="userForm" action="Mail.php" method="POST">
<div class="row">
<div class="col-lg-4"><label>نام و نام خانوادگی</label><br /><br /></div>
<div class="col-lg-8">
<input type="text" class="userInput" id="nameFamily" name="nameFamily" onblur="CheckEmpty();" />
</div>
</div><br />
<div class="row">
<div class="col-lg-4"><label>ایمیل</label><br /><br /></div>
<div class="col-lg-8">
<input type="text" class="userInput" id="mail" name="mail" onblur="CheckEmpty();" />
</div>
</div><br />
<div class="row">
<div class="col-lg-4"><label>شماره تماس</label><br /><br /></div>
<div class="col-lg-8">
<input type="text" class="userInput" id="phone" name="phone" onblur="CheckEmpty();" />
</div>
</div><br />
<div class="row">
<div class="col-lg-4"><label>شهر و محدوده ساختمان</label><br /><br /></div>
<div class="col-lg-8">
<input type="text" class="userInput" id="building" name="building" onblur="CheckEmpty();" />
</div>
</div><br />
<div class="row">
<div class="col-lg-4"> <label>توضیحات و نکات قابل ذکر</label><br /><br /></div>
<div class="col-lg-8">
<textarea id="text" name="text" onblur="CheckEmpty();"></textarea>
</div>
</div><br />
<div class="row">
<div class="col-lg-4"><label>نوع پروژه</label>
<button type="button" class="btn btn-default" style="width:35px;height:35px;background-color:#19B1F9;border:1px solid #19B1F9;border-radius:50px;color:#FFF" data-toggle="tooltip" data-placement="left" title="تعویضی: خانه ی شما دارای هر نوع در و پنجره به جز UPVC و شما
خواهان تعویض آن با UPVC هستید.
نوساز: خانه ی شما در حال ساخت است و برای اولین بار است که
می خواهید برای آن در و پنجره نصب کنید.">؟</button>
<br /><br />
</div>
<div class="col-lg-8">
<input type="radio" name="projectKind" onclick="undisable()" /><label>تعویضی</label>
<input type="radio" name="projectKind" onclick="disable()" /><label>نوساز</label>
</div>
</div><br />
<div class="row">
<div class="col-lg-4"><label>نوع پنجره قبلی</label><br /><br /></div>
<div class="col-lg-8">
<input type="radio" name="previousWindow" id="myRadio" /><label>آهنی</label>
<input type="radio" name="previousWindow" id="myRadioTwo" /><label>آلومینیومی</label>
<input type="radio" name="previousWindow" id="myRadioThree" /><label>چوبی</label>
</div>
</div><br />
<div class="row">
<div class="col-lg-4"><label>نوع نصب روی</label><br /><br /></div>
<div class="col-lg-8">
<input type="radio" name="setupKind" /><label>آهن</label>
<input type="radio" name="setupKind" /><label>سنگ</label>
</div>
</div><br />
<div class="row">
<div class="col-lg-4"><label>نوع شیشه</label><br /><br /></div>
<div class="col-lg-8">
<input type="radio" name="windowKind" /><label>فلوت ساده</label>
<input type="radio" name="windowKind" /><label>فلوت برنز</label>
<input type="radio" name="windowKind" /><label>رفلکس برنز</label>
<input type="radio" name="windowKind" /><label>رفلکس نقره ای</label><br />
<input type="radio" name="windowKind" /><label>رفلکس آبی</label>
<input type="radio" name="windowKind" /><label>رفلکس سبز</label>
<input type="radio" name="windowKind" /><label>رفلکس دودی</label>
</div>
</div><br />
<div class="row">
<div class="col-lg-4"><label>ضخامت شیشه</label><br /><br /></div>
<div class="col-lg-8">
<input type="radio" name="glassWidth" /><label>4 - 14 - 4</label>
<input type="radio" name="glassWidth" /><label>6 - 10 - 14</label>
<input type="radio" name="glassWidth" /><label>4 - 12 -4</label>
<input type="radio" name="glassWidth" /><label>6 - 12 - 4</label>
</div>
</div>
<br /><br /><br /><br />
<div class="row">
<div class="col-lg-4"><label>درب یا پنجره</label><br /><br /></div>
<div class="col-lg-8">
<input type="radio" name="glassOrWindow" /><label>درب</label>
<input type="radio" name="glassOrWindow" /><label>پنجره</label>
</div>
</div><br />
<div class="row">
<div class="col-lg-4"><label>عرض</label><br /><br /></div>
<div class="col-lg-8">
<input type="text" class="sizeInput" style="min-width: 60px" id="width" name="width" onblur="CheckEmpty();" />
</div>
</div><br />
<div class="row">
<div class="col-lg-4"><label>ارتفاع</label><br /><br /></div>
<div class="col-lg-8"><input type="text" class="sizeInput" style="min-width: 60px" id="height" name="height" onblur="CheckEmpty();" /></div>
</div><br />
<div class="row">
<div class="col-lg-4"><label>تعداد</label><br /><br /></div>
<div class="col-lg-8"><input type="text" class="sizeInput" style="min-width: 60px" id="number" name="number" onblur="CheckEmpty();" /></div>
</div><br />
<div class="row">
<div class="col-lg-4"><label>نوع یراق</label><br /><br /></div>
<div class="col-lg-8">
<input type="radio" name="borderKind" /><label>تک حالته</label>
<input type="radio" name="borderKind" /><label>دو حالته</label>
<input type="radio" name="borderKind" /><label>کشویی</label>
<input type="radio" name="borderKind" /><label>سوئیچی</label>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4">
<a href="#"><button>ارسال</button></a>
</div>
<div class="col-lg-4"></div>
</div>
</form>

[Omid Jackson]

خودتون رو زیادی اذیت میکنین، با جی کوئری خیلی ساده میشه نوشت:
http://jsfiddle.net/Blend_Design/0supng2w/
برای سابمیت هم قبلا گفتم، با جی کوئری خیلی ساده تر از روش قبل هم میشه

[ABZiko]

خیلی ممنون، می شه چون از jQuery استفاده کردم، هنگام Submit شدنش رو هم با jQuery بگید ؟

[Omid Jackson]

شما کافیه ID هر کدوم رو که میخواین بگیرین و مقدارش رو چک کنین و با || بگین که حتی هر کدوم از اونها خالی بودن تابع اجرا نشه (سابمیت نشه)
http://jsfiddle.net/Blend_Design/0supng2w/1/