کدهای فرم HTML
<!DOCTYPE html>
<!-- saved from url=(0016)http://localhost -->
<html lang='en'>
<head>
<title title='HTML Form'></title>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='../CSS/styles.css' type='text/css'>
<link rel='stylesheet' href='../CSS/buttons.css' type='text/css'>
<script src='../SCRIPTS/jquery-3.7.1.js'></script>
<script>
const textbox_pattern = /[^ءأاآبپتثجچحخدذرزژسشصضطظع فقکگلمنوهی\u200c\u0020]+/g;
const textarea_pattern = /[^a-zA-Z0-9\u0020]/gm;
const text_invalid_msg = 'الزامی - فقط حروف فارسی';
const textarea_invalid_msg = 'الزامی - فقط حروف و اعداد لاتین';
const select_invalid_msg = 'انتخاب الزامی است';
const checkbox_group_invalid_msg = 'دست کم یک مورد باید انتخاب شود';
var textbox;
var textarea;
var file;
var select;
var checkbox_group_values;
var checkbox_group_texts;
$(function () {
textbox = document.getElementById('fld_text');
textbox.addEventListener('keyup', validate_text);
textarea = document.getElementById('fld_textarea');
textarea.addEventListener('keyup', validate_textarea);
file = document.getElementById('fld_file');
file.addEventListener('change', validate_file);
select = document.getElementById('fld_select');
select.addEventListener('change', validate_select);
checkbox_group_values = document.getElementById('fld_checkbox_group_values ');
checkbox_group_texts = document.getElementById('fld_checkbox_group_texts' );
//===========================================
$('[name=fld_checkbox_group]').each(function () {
$(this).on('change', validate_checkbox_group);
});
//===========================================
$('form td:first-of-type label').each(function () {
if ($(this).closest('td').next('td').find('input, textarea, select').prop('required')) {
$(this).addClass('required');
}
});
//===========================================
$('#btn_save').on('click', function () {
return false;
});
//===========================================
$('form').on('submit', function (e) {
e.preventDefault();
});
//===========================================
$('#btn_clear').on('click', function () {
$('form textarea, select ,input[type=text], input[type=url], input[type=email], input[type=password], input[type=file]').each(function () {
$(this).val('');
});
$('form input[type=range]').each(function () {
$(this).val(0);
$(this).next('span').text($(this).val());
});
$('form input[type=checkbox],input[type=radio]').each(function () {
$(this).prop('checked', false);
});
$('#fld_radio_group_1').prop('checked', true);
});
//===========================================
$('#fld_range').on('change', function () {
$('#fld_range_value').text($(this).val());
});
});
//===========================================
function validate_text() {
if (textbox.value.match(textbox_pattern) || textbox.value == '') {
textbox.setCustomValidity(text_invalid_msg);
}
else {
textbox.setCustomValidity('');
}
}
//===========================================
function validate_textarea() {
if (textarea.value.replace(/[\n]/g, '').match(textarea_pattern) || textarea.value == '') {
textarea.setCustomValidity(textarea_invalid_msg);
}
else {
textarea.setCustomValidity('');
}
};
//===========================================
function validate_select() {
if (select.value == '') {
select.setCustomValidity(select_invalid_msg);
}
else {
select.setCustomValidity('');
}
};
//===========================================
function validate_checkbox_group() {
var values = [];
var texts = [];
$('[name=fld_checkbox_group]:checked').each(function () {
values.push($(this).val());
texts.push($(this).next('label').text());
});
checkbox_group_values.value = values.join();
checkbox_group_texts.value = texts.join();
if (values.length == 0) {
checkbox_group_values.setCustomValidity(checkbox_g roup_invalid_msg);
}
else {
checkbox_group_values.setCustomValidity('');
}
};
//===========================================
function validate_file() {
var file_value = file.value;
if (file_value == '') {
file.setCustomValidity('');
}
else {
var files = file_value.split(',');
const valid_extentions = /(\.rar|\.zip)$/i;
for (i = 0; i < files.length; i++) {
if (!valid_extentions.exec(files[i])) {
file.setCustomValidity('فقط فایلهای\n rar یا zip \nمجاز است');
}
}
}
};
//===========================================
function validate() {
validate_text();
validate_textarea();
validate_select();
validate_checkbox_group();
validate_file();
$('#btn_submit').trigger('click');
};
//===========================================
function get_radio_group_text() {
$('#fld_radio_group_text').val($('[name=fld_radio_group]:checked').next('label').text());
};
</script>
</head>
<body>
<form>
<fieldset>
<legend>HTML Form</legend>
<table>
<tr>
<td><label>Text Box</label></td>
<td>
<input type='text' id='fld_text' required class='field'
pattern='[ءأاآبپتثجچحخدذرزژسشصضطظعق فقکگلمنوهی\u200c\u0020]+'
placeholder='متن را اینجا بنویسید : فقط حروف فارسی'>
</td>
</tr>
<tr>
<td><label>Text Area</label></td>
<td>
<textarea id='fld_textarea' rows='4' required class='field'
placeholder='Write text here: only a-z A-Z 0-9'></textarea>
</td>
</tr>
<tr>
<td><label>Password</label></td>
<td>
<input type='password' id='fld_password' class='field'
pattern='^(?=(.*[a-z]){1,})(?=(.*[A-Z]){1,})(?=(.*[0-9]){1,})(?=(.*[!@#$%^&*\-__+.]){1,}).{8,}$'
placeholder='a-z A-Z 0-9 !@#$%^&*-_+. دست کم ۸ کارآکتر' />
</td>
</tr>
<tr>
<td><label>Email</label></td>
<td><input type='email' id='fld_email' class='field' placeholder='username@domain' /></td>
</tr>
<tr>
<td><label>URL</label></td>
<td><input type='url' id='fld_url' class='field' placeholder='urlscheme://restofurl' /></td>
</tr>
<tr>
<td><label>File</label></td>
<td><input type='file' id='fld_file' class='field' accept=".rar, .zip" multiple="true" /></td>
</tr>
<tr>
<td><label>Select (ComboBox)</label></td>
<td>
<select id='fld_select' required class='field'>
<option value=''>انتخاب کنید</option>
<optgroup label='group Green' class='green'>
<option value='g'>green</option>
<option value='gl'>light green</option>
<option value='gd'>dark green</option>
</optgroup>
<optgroup label='group Red' class='red'>
<option value='rl'>light red</option>
<option value='rd'>dark red</option>
</optgroup>
<optgroup label='group Blue' class='blue'>
<option value='b'>blue</option>
<option value='bl'>light blue</option>
<option value='bd'>dark blue</option>
<option value='bs'>sky blue</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td><label>List</label></td>
<td>
<input id='fld_list' list='categories' class='field'
placeholder="انتخاب از لیست یا عبارت دلخواه">
<datalist id='categories'>
<option value='Beverages'></option>
<option value='Condiments'></option>
<option value='Confections'></option>
<option value='Dairy Products'></option>
<option value='Grains/Cereals'></option>
<option value='Meat/Poultry'></option>
<option value='Produce'></option>
<option value='Seafood'></option>
</datalist>
</td>
</tr>
<tr>
<td><label>Check Box</label></td>
<td><input type='checkbox' id='fld_checkbox' /></td>
</tr>
<tr>
<td><label>CheckBox Group</label></td>
<td>
<input type='text' id='fld_checkbox_group_values' class='hidden field' value='' required>
<input type='hidden' id='fld_checkbox_group_texts' value=''>
<input type='checkbox' id='fld_checkbox_group_1' name='fld_checkbox_group'
value='sc'><label>Science</label>
<input type='checkbox' id='fld_checkbox_group_2' name='fld_checkbox_group'
value='mt'><label>Math</label>
<input type='checkbox' id='fld_checkbox_group_3' name='fld_checkbox_group'
value='ar'><label>Art</label>
<input type='checkbox' id='fld_checkbox_group_4' name='fld_checkbox_group'
value='ph'><label>Physics</label>
<input type='checkbox' id='fld_checkbox_group_5' name='fld_checkbox_group'
value='sp'><label>Sports</label>
</td>
</tr>
<tr>
<td>
<label>Radio Group</label>
</td>
<td>
<input type='radio' id='fld_radio_group_1' name='fld_radio_group' value='1' checked='checked'
required /><label>Access</label>
<input type='radio' id='fld_radio_group_2' name='fld_radio_group'
value='2' /><label>Excel</label>
<input type='radio' id='fld_radio_group_3' name='fld_radio_group'
value='3' /><label>Word</label>
<input type='radio' id='fld_radio_group_4' name='fld_radio_group'
value='4' /><label>Visio</label>
<input type='hidden' id='fld_radio_group_text' value=''>
</td>
</tr>
<tr>
<td><label>Range</label></td>
<td>
<input type='range' id='fld_range' min='24' max='80' step='4' value='36' list='ticks' />
<span id='fld_range_value'>36</span>
<datalist id='ticks'>
<option value='24'></option>
<option value='32'></option>
<option value='40'></option>
<option value='48'></option>
<option value='56'></option>
<option value='64'></option>
<option value='72'></option>
<option value='80'></option>
</datalist>
</td>
</tr>
<tr>
<td></td>
<td>
<button type='button' id='btn_save' class='btn'>Save</button>
<button type='button' id='btn_clear' class='btn'>Clear Form</button>
<button type='submit' id='btn_submit'>Submit</button>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>