.fatemeh
چهارشنبه 11 تیر 1393, 01:28 صبح
سلام
یه فرم دارم که توش دوتا گزینه داره که حتما یکیش باید انتخاب بشه.
کدی گذاشتم طوری عمل میکنه که اگر گزینه دوم رو انتخاب کنم درست میشه
ولی اگر گزینه اول رو انتخاب بشه خطای فیلد الزامی رو پر کنید میده
با استفاده از دستور required="required" مربوط به html5 درست می شه ولی توی ie8 که اجرا نشد.
اینها کدهایی هست که دارم استفاده می کنم.
صفحه html:
<form id="MyForm" action="">
<div class="table">
<div class="row">
<p> نام و نام خانوادگی: <input name="n" type="text" class="text" id="n" style="width:250px; " require="true"></p>
<div class="clear">
</div>
</div>
<div class="row">
<p>شماره پرونده (در صورت مراجعه قبلی): <input name="num_p" type="text" class="text" id="e" style="width:150px; " ></p>
<div class="clear"></div>
</div>
<div class="row">
<div class="clear"></div>
</div>
<div class="row">
<div class="column1">تلفن: <input name="tel" type="text" class="text" id="tel" style="width:143px; " validate="num"> </div>
<div class="column2">تلفن همراه: <input name="m" type="text" class="text" id="m" style="width:130px; " validate="num"> </div>
<div class="clear"></div>
</div>
<div class="row" style="margin-top:10px; ">
<div class="column1">
<p>علت درخواست مراجعه:</p>
<p><input type="radio" name="reason" require="true" value="1" >
جهت ویزیت
<input type="radio" name="reason" require="true" value="2">
ادامه درمان
<label></label>
</p>
</div>
<div class="clear"> </div>
</div>
<div class="row" style="margin-top:10px; ">
<div class="column1">توضیحات بیشتر:
<input name="com" type="text" class="area" id="com" value="" size="62" >
</div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="column2"><input type="submit" name="send" value="ثبت اطلاعات" class="kelid" id="send">
<input type="reset" value="پاک کردن فرم" class="kelid"></div>
<div class="clear"></div>
</div>
</div>
</form>
صفحه js
(function($){
$.fn.formly = function(options, callback)
{
// Default settings
var settings =
{
'theme' : 'Base',
'onBlur' : true
};
if(options)
{ $.extend(settings, options); }
// Form name, very important!
var formName = this.attr('id');
if(!formName)
{
// If no name, make a random one
formName = Math.ceil(Math.random()*5000);
this.attr('id', formName);
}
this.append('<div style="clear:both;"></div><div class="formlyAlerts"></div>');
this.addClass('formlyWrapper-' + settings['theme']);
if(this.attr('width'))
{ this.css('width', this.attr('width')); }
if(this.attr('subtitle') || this.attr('title'))
{ this.prepend('<hr/>'); }
if(this.attr('subtitle'))
{ this.prepend('<h2>' + this.attr('subtitle') + '</h2>'); }
if(this.attr('title'))
{ this.prepend('<h1>' + this.attr('title') + '</h1>'); }
this.children().each(function(index, item)
{
// Placeholder text
if($(item).attr('place'))
{
if($(item).attr('type')=='password')
{
// Password fields with placeholders
var hID = 'pwPlace-' + $(item).attr('name');
$(item).after('<input type="text" id="' + hID + '" value="' + $(item).attr('place') + '" class="formlyPWPlaces" />');
$('#' + hID).css('color', '#bbb');
$(item).hide();
$('#' + hID).show();
// Focus and blur must be handled independently for variables sake
$('#' + hID).focus(function()
{
$('#' + hID).hide();
$(item).show();
$(item).focus();
});
$(item).blur(function()
{
if(!$(item).val())
{
$('#' + hID).show();
$(item).hide();
}
});
}
else
{
$(item).val($(item).attr('place'));
$(item).css('color', '#bbb');
}
}
$(item).blur(function()
{
// Placeholder text
if(!$(item).val() || $(item).val()==$(item).attr('pre-fix'))
{
if($(item).attr('type')!='password')
{
$(item).val($(item).attr('place'));
$(item).css('color', '#bbb');
}
}
if($(item).attr('pre-fix'))
{
var originalVal = $(item).val();
var thePrefix = $(item).attr('pre-fix');
if(thePrefix.length==1)
{
if(originalVal.charAt(0) != thePrefix && $(item).val() != $(item).attr('place'))
{ $(item).val(thePrefix + originalVal); }
}
else
{
if(originalVal.indexOf(thePrefix) == -1 && $(item).val() != $(item).attr('place'))
{ $(item).val(thePrefix + originalVal); }
}
}
if(settings['onBlur'])
{
// Validation
if($(item).attr('validate'))
{ functions.validate(item); }
// Required
if($(item).attr('require'))
{ functions.require(item); }
// Match
if($(item).attr('match'))
{ functions.match(item); }
}
});
// Focus actions
$(item).focus(function()
{
// Placeholder
if($(item).attr('place'))
{
if($(item).val()==$(item).attr('place'))
{
$(item).val('');
$(item).css('color', '');
}
}
// Prefixes
if($(item).attr('pre-fix') && !$(item).val())
{
$(item).val('');
$(item).val($(item).attr('pre-fix'));
}
});
// Reset button
$('#' + formName).find('input:reset').click(function(item)
{
item.preventDefault();
$('#' + formName).find('input:text, input:password, input:radio, input:radio').each(function()
{
$(this).css('border-color', '');
if($(this).is(':checked'))
{ $(this).attr('checked', false); }
if($(this).attr('place'))
{
if($(this).attr('type')!='password')
{
$(this).val($(this).attr('place'));
$(this).css('color', '#bbb');
}
else
{
if($(this).hasClass('formlyPWPlaces'))
{
$(this).show();
$(this).prev('input').hide();
}
else
{ $(this).val(''); }
}
}
else
{
if($(this).hasClass('formlyPWPlaces'))
{
$(this).show();
$(this).prev('input').hide();
}
else
{ $(this).val(''); }
}
});
$('#' + formName).find('.formlyAlert').each(function()
{
$(this).fadeOut(function()
{ $(this).remove() });
});
});
});
// Submit button
this.submit(function(item)
{
var canSubmit = true;
$(this).find('input').each(function()
{
if($(this).attr('require'))
{
if(!functions.require(this))
{ canSubmit = false; }
}
if($(this).attr('validate'))
{
if(!functions.validate(this))
{ canSubmit = false; }
}
// Match
if($(this).attr('match'))
{
if(!functions.match(this))
{ canSubmit = false; }
}
});
if(!canSubmit)
{ item.preventDefault(); }
else
{
if(callback)
{ // Change this to .serializeArray() for JSON
item.preventDefault();
callback($(this).serialize());
}
}
});
var functions =
{
validateString : function(type, string)
{
// Validate email regular expression
if(type=='email')
{
var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
if(filter.test(string))
{ return true; }
else
{ return false; }
}
// Validate a simple URL regular expression
else if(type=='http')
{
var filter = /http:\/\/[A-Za-z0-9\.-]{3,}\.[A-Za-z]{2,3}/i
if(filter.test(string))
{ return true; }
else
{ return false; }
}
else if(type=='num')
{
var filter = /^[0-9]{8,15}$/i
if(filter.test(string))
{ return true; }
else
{ return false; }
}
},
validate : function(item)
{
var alertName = formName + $(item).attr('name');
if($(item).attr('validate')=='email')
{
var valid = functions.validateString('email', $(item).val());
var validType = 'آدرس ایمیل معتبر نیست ';
}
else if($(item).attr('validate')=='http')
{
var valid = functions.validateString('http', $(item).val());
var validType = 'آدرس وب سایت نادرست است';
}
else if($(item).attr('validate')=='num')
{
var valid = functions.validateString('num', $(item).val());
var validType = 'استفاده از کارکتر غیر مجاز ، عدد وارد کنید';
}
else if($(item).attr('validate')=='add2')
{
var valid = functions.validateString('add2', $(item).val());
var validType = 'استفاده از کارکتر غیر مجاز ، آدرس نامعتبر است';
}
if(!valid)
{
if(!$('#' + alertName).is(':visible'))
{
$('#' + formName).find('.formlyAlerts').append('<div class="formlyInvalid formlyAlert" id="' + alertName + '">خطا !! ' + validType + '</div>')
$('#' + alertName).fadeIn();
}
var borderColor = $('#' + alertName).css('background-color');
$(item).css('border-color', borderColor);
if($(item).attr('type')=='password')
{ $(item).next('.formlyPWPlaces').css('border-color', borderColor); }
return false;
}
else
{
$('#' + alertName).fadeOut(function()
{ $(this).remove() });
$(item).css('border-color', '');
$('.formlyPWPlaces').css('border-color', '');
return true;
}
},
require : function(item)
{
var alertName = formName + $(item).attr('name');
var label = $(item).attr('label')+' ';
if(label=='undefined '){label='';}
if(!$(item).val() || $(item).val()==$(item).attr('place'))
{
if(!$('#' + alertName).is(':visible'))
{
$('#' + formName).find('.formlyAlerts').append('<div class="formlyRequired formlyAlert" id="' + alertName + '">'+label+' خطا !! فیلد الزامی را پر کنید </div>')
$('#' + alertName).fadeIn();
}
var borderColor = $('#' + alertName).css('background-color');
$(item).css('border-color', borderColor);
if($(item).attr('type')=='password')
{ $(item).next('.formlyPWPlaces').css('border-color', borderColor); }
return false;
}
else if($(item).attr('type')=='radio' && !$(item).is(':checked'))
{
if(!$('#' + alertName).is(':visible'))
{
$('#' + formName).find('.formlyAlerts').append('<div class="formlyRequired formlyAlert" id="' + alertName + '">'+label+'Required</div>')
$('#' + alertName).fadeIn();
$(item).focus();
}
var borderColor = $('#' + alertName).css('background-color');
$(item).css('border-color', borderColor);
return false;
}
else
{
$('#' + alertName).fadeOut(function()
{ $(this).remove() });
$(item).css('border-color', '');
$('.formlyPWPlaces').css('border-color', '');
return true;
}
},
match : function(item)
{
var alertName = formName + $(item).attr('name');
var label = $(item).attr('label')+' ';
if(label=='undefined '){label='';}
var toMatch = $(item).attr('match');
if($(item).val() != $('#' + formName).find('input[name=' + toMatch + ']').val() || !$(item).val())
{
if(!$('#' + alertName).is(':visible'))
{
$('#' + formName).find('.formlyAlerts').append('<div class="formlyInvalid formlyAlert" id="' + alertName + '">'+label+'Does not match</div>')
$('#' + alertName).fadeIn();
}
var borderColor = $('#' + alertName).css('background-color');
$(item).css('border-color', borderColor);
if($(item).attr('type')=='password')
{ $(item).next('.formlyPWPlaces').css('border-color', borderColor); }
return false;
}
else
{
$('#' + alertName).fadeOut(function()
{ $(this).remove() });
$(item).css('border-color', '');
$('.formlyPWPlaces').css('border-color', '');
return true;
}
}
};
};
})( jQuery );
قسمت علت درخواست مراجعه الزامیه.
خیلی جستجو کردم به نتیجه ای نرسیدم.
لطفا راهنمایی کنید
ممنون
یه فرم دارم که توش دوتا گزینه داره که حتما یکیش باید انتخاب بشه.
کدی گذاشتم طوری عمل میکنه که اگر گزینه دوم رو انتخاب کنم درست میشه
ولی اگر گزینه اول رو انتخاب بشه خطای فیلد الزامی رو پر کنید میده
با استفاده از دستور required="required" مربوط به html5 درست می شه ولی توی ie8 که اجرا نشد.
اینها کدهایی هست که دارم استفاده می کنم.
صفحه html:
<form id="MyForm" action="">
<div class="table">
<div class="row">
<p> نام و نام خانوادگی: <input name="n" type="text" class="text" id="n" style="width:250px; " require="true"></p>
<div class="clear">
</div>
</div>
<div class="row">
<p>شماره پرونده (در صورت مراجعه قبلی): <input name="num_p" type="text" class="text" id="e" style="width:150px; " ></p>
<div class="clear"></div>
</div>
<div class="row">
<div class="clear"></div>
</div>
<div class="row">
<div class="column1">تلفن: <input name="tel" type="text" class="text" id="tel" style="width:143px; " validate="num"> </div>
<div class="column2">تلفن همراه: <input name="m" type="text" class="text" id="m" style="width:130px; " validate="num"> </div>
<div class="clear"></div>
</div>
<div class="row" style="margin-top:10px; ">
<div class="column1">
<p>علت درخواست مراجعه:</p>
<p><input type="radio" name="reason" require="true" value="1" >
جهت ویزیت
<input type="radio" name="reason" require="true" value="2">
ادامه درمان
<label></label>
</p>
</div>
<div class="clear"> </div>
</div>
<div class="row" style="margin-top:10px; ">
<div class="column1">توضیحات بیشتر:
<input name="com" type="text" class="area" id="com" value="" size="62" >
</div>
<div class="clear"> </div>
</div>
<div class="row">
<div class="column2"><input type="submit" name="send" value="ثبت اطلاعات" class="kelid" id="send">
<input type="reset" value="پاک کردن فرم" class="kelid"></div>
<div class="clear"></div>
</div>
</div>
</form>
صفحه js
(function($){
$.fn.formly = function(options, callback)
{
// Default settings
var settings =
{
'theme' : 'Base',
'onBlur' : true
};
if(options)
{ $.extend(settings, options); }
// Form name, very important!
var formName = this.attr('id');
if(!formName)
{
// If no name, make a random one
formName = Math.ceil(Math.random()*5000);
this.attr('id', formName);
}
this.append('<div style="clear:both;"></div><div class="formlyAlerts"></div>');
this.addClass('formlyWrapper-' + settings['theme']);
if(this.attr('width'))
{ this.css('width', this.attr('width')); }
if(this.attr('subtitle') || this.attr('title'))
{ this.prepend('<hr/>'); }
if(this.attr('subtitle'))
{ this.prepend('<h2>' + this.attr('subtitle') + '</h2>'); }
if(this.attr('title'))
{ this.prepend('<h1>' + this.attr('title') + '</h1>'); }
this.children().each(function(index, item)
{
// Placeholder text
if($(item).attr('place'))
{
if($(item).attr('type')=='password')
{
// Password fields with placeholders
var hID = 'pwPlace-' + $(item).attr('name');
$(item).after('<input type="text" id="' + hID + '" value="' + $(item).attr('place') + '" class="formlyPWPlaces" />');
$('#' + hID).css('color', '#bbb');
$(item).hide();
$('#' + hID).show();
// Focus and blur must be handled independently for variables sake
$('#' + hID).focus(function()
{
$('#' + hID).hide();
$(item).show();
$(item).focus();
});
$(item).blur(function()
{
if(!$(item).val())
{
$('#' + hID).show();
$(item).hide();
}
});
}
else
{
$(item).val($(item).attr('place'));
$(item).css('color', '#bbb');
}
}
$(item).blur(function()
{
// Placeholder text
if(!$(item).val() || $(item).val()==$(item).attr('pre-fix'))
{
if($(item).attr('type')!='password')
{
$(item).val($(item).attr('place'));
$(item).css('color', '#bbb');
}
}
if($(item).attr('pre-fix'))
{
var originalVal = $(item).val();
var thePrefix = $(item).attr('pre-fix');
if(thePrefix.length==1)
{
if(originalVal.charAt(0) != thePrefix && $(item).val() != $(item).attr('place'))
{ $(item).val(thePrefix + originalVal); }
}
else
{
if(originalVal.indexOf(thePrefix) == -1 && $(item).val() != $(item).attr('place'))
{ $(item).val(thePrefix + originalVal); }
}
}
if(settings['onBlur'])
{
// Validation
if($(item).attr('validate'))
{ functions.validate(item); }
// Required
if($(item).attr('require'))
{ functions.require(item); }
// Match
if($(item).attr('match'))
{ functions.match(item); }
}
});
// Focus actions
$(item).focus(function()
{
// Placeholder
if($(item).attr('place'))
{
if($(item).val()==$(item).attr('place'))
{
$(item).val('');
$(item).css('color', '');
}
}
// Prefixes
if($(item).attr('pre-fix') && !$(item).val())
{
$(item).val('');
$(item).val($(item).attr('pre-fix'));
}
});
// Reset button
$('#' + formName).find('input:reset').click(function(item)
{
item.preventDefault();
$('#' + formName).find('input:text, input:password, input:radio, input:radio').each(function()
{
$(this).css('border-color', '');
if($(this).is(':checked'))
{ $(this).attr('checked', false); }
if($(this).attr('place'))
{
if($(this).attr('type')!='password')
{
$(this).val($(this).attr('place'));
$(this).css('color', '#bbb');
}
else
{
if($(this).hasClass('formlyPWPlaces'))
{
$(this).show();
$(this).prev('input').hide();
}
else
{ $(this).val(''); }
}
}
else
{
if($(this).hasClass('formlyPWPlaces'))
{
$(this).show();
$(this).prev('input').hide();
}
else
{ $(this).val(''); }
}
});
$('#' + formName).find('.formlyAlert').each(function()
{
$(this).fadeOut(function()
{ $(this).remove() });
});
});
});
// Submit button
this.submit(function(item)
{
var canSubmit = true;
$(this).find('input').each(function()
{
if($(this).attr('require'))
{
if(!functions.require(this))
{ canSubmit = false; }
}
if($(this).attr('validate'))
{
if(!functions.validate(this))
{ canSubmit = false; }
}
// Match
if($(this).attr('match'))
{
if(!functions.match(this))
{ canSubmit = false; }
}
});
if(!canSubmit)
{ item.preventDefault(); }
else
{
if(callback)
{ // Change this to .serializeArray() for JSON
item.preventDefault();
callback($(this).serialize());
}
}
});
var functions =
{
validateString : function(type, string)
{
// Validate email regular expression
if(type=='email')
{
var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
if(filter.test(string))
{ return true; }
else
{ return false; }
}
// Validate a simple URL regular expression
else if(type=='http')
{
var filter = /http:\/\/[A-Za-z0-9\.-]{3,}\.[A-Za-z]{2,3}/i
if(filter.test(string))
{ return true; }
else
{ return false; }
}
else if(type=='num')
{
var filter = /^[0-9]{8,15}$/i
if(filter.test(string))
{ return true; }
else
{ return false; }
}
},
validate : function(item)
{
var alertName = formName + $(item).attr('name');
if($(item).attr('validate')=='email')
{
var valid = functions.validateString('email', $(item).val());
var validType = 'آدرس ایمیل معتبر نیست ';
}
else if($(item).attr('validate')=='http')
{
var valid = functions.validateString('http', $(item).val());
var validType = 'آدرس وب سایت نادرست است';
}
else if($(item).attr('validate')=='num')
{
var valid = functions.validateString('num', $(item).val());
var validType = 'استفاده از کارکتر غیر مجاز ، عدد وارد کنید';
}
else if($(item).attr('validate')=='add2')
{
var valid = functions.validateString('add2', $(item).val());
var validType = 'استفاده از کارکتر غیر مجاز ، آدرس نامعتبر است';
}
if(!valid)
{
if(!$('#' + alertName).is(':visible'))
{
$('#' + formName).find('.formlyAlerts').append('<div class="formlyInvalid formlyAlert" id="' + alertName + '">خطا !! ' + validType + '</div>')
$('#' + alertName).fadeIn();
}
var borderColor = $('#' + alertName).css('background-color');
$(item).css('border-color', borderColor);
if($(item).attr('type')=='password')
{ $(item).next('.formlyPWPlaces').css('border-color', borderColor); }
return false;
}
else
{
$('#' + alertName).fadeOut(function()
{ $(this).remove() });
$(item).css('border-color', '');
$('.formlyPWPlaces').css('border-color', '');
return true;
}
},
require : function(item)
{
var alertName = formName + $(item).attr('name');
var label = $(item).attr('label')+' ';
if(label=='undefined '){label='';}
if(!$(item).val() || $(item).val()==$(item).attr('place'))
{
if(!$('#' + alertName).is(':visible'))
{
$('#' + formName).find('.formlyAlerts').append('<div class="formlyRequired formlyAlert" id="' + alertName + '">'+label+' خطا !! فیلد الزامی را پر کنید </div>')
$('#' + alertName).fadeIn();
}
var borderColor = $('#' + alertName).css('background-color');
$(item).css('border-color', borderColor);
if($(item).attr('type')=='password')
{ $(item).next('.formlyPWPlaces').css('border-color', borderColor); }
return false;
}
else if($(item).attr('type')=='radio' && !$(item).is(':checked'))
{
if(!$('#' + alertName).is(':visible'))
{
$('#' + formName).find('.formlyAlerts').append('<div class="formlyRequired formlyAlert" id="' + alertName + '">'+label+'Required</div>')
$('#' + alertName).fadeIn();
$(item).focus();
}
var borderColor = $('#' + alertName).css('background-color');
$(item).css('border-color', borderColor);
return false;
}
else
{
$('#' + alertName).fadeOut(function()
{ $(this).remove() });
$(item).css('border-color', '');
$('.formlyPWPlaces').css('border-color', '');
return true;
}
},
match : function(item)
{
var alertName = formName + $(item).attr('name');
var label = $(item).attr('label')+' ';
if(label=='undefined '){label='';}
var toMatch = $(item).attr('match');
if($(item).val() != $('#' + formName).find('input[name=' + toMatch + ']').val() || !$(item).val())
{
if(!$('#' + alertName).is(':visible'))
{
$('#' + formName).find('.formlyAlerts').append('<div class="formlyInvalid formlyAlert" id="' + alertName + '">'+label+'Does not match</div>')
$('#' + alertName).fadeIn();
}
var borderColor = $('#' + alertName).css('background-color');
$(item).css('border-color', borderColor);
if($(item).attr('type')=='password')
{ $(item).next('.formlyPWPlaces').css('border-color', borderColor); }
return false;
}
else
{
$('#' + alertName).fadeOut(function()
{ $(this).remove() });
$(item).css('border-color', '');
$('.formlyPWPlaces').css('border-color', '');
return true;
}
}
};
};
})( jQuery );
قسمت علت درخواست مراجعه الزامیه.
خیلی جستجو کردم به نتیجه ای نرسیدم.
لطفا راهنمایی کنید
ممنون