jQueryプラグインの作成方法に関するチュートリアルを終えた後、私はそれを試してフォーム検証プラグインを作成することにしました。私はこれまでのところ、期待していたものの90％を達成することができました。残っているのは、空のフィールドが見つかった場合にフォームがfalseを返すようにすることだけです。
コード全体をjsfiddleに配置しましたが、機能していないようです。おそらく、スクリプトセクションに貼り付けるのではなく、プラグインファイルを含める必要があるためです。ただし、コード全体を確認する必要がある場合に備えて、共有しています。
プラグインワークフロー
(function(jQuery) {
window.cnt = 0;
jQuery.fn.border = function() {
this.each(function() {
var ele = jQuery(this);
var cur_val, ele_name;
if(// element is input, select, or textarea)
{
cur_val = ele.val();
}
else if(// element is radio)
{
ele_name = ele.attr('name');
cur_val = $('input:radio[name="'+ele_name+'"]:checked').val();
}
else if(// element is checkbox)
{
ele_name = ele.attr('name');
cur_val = $('input:checkbox[name="'+ele_name+'"]:checked').val();
}
if(! cur_val) // need to do something here to prevent form submission
{
cnt++;
if(// input, textarea, select element)
{
ele.addClass('border');
}
else if(// radio or checkbox element)
{
ele.parent().addClass('border');
}
}
else // need to do something here to make the form submission happen
{
if(// input, select, textarea)
{
ele.removeClass('border');
}
else if(radio or checkbox)
{
ele.parent().removeClass('border');
}
}
});
return this;
};
})(jQuery);// JavaScript Document
私が試したこと
<script type="text/javascript">
$(function(){
$('form').submit(function(){
$('.required').border();
if(window.cnt > 0)
{
return false;
}
else
{
return true;
}
});
});
</script>
グローバル変数を作成しcnt、フォーム送信機能内で使用してみました。空の要素がある場合は機能しましたが、falseすべての要素がいっぱいになった後でも戻りました。の値を警告した後cnt、各ボタンでcnt以前の値から追加し続けるの値をクリックすると、cnt > 0常にが返されることがわかりましたtrue。
したがって、プラグイン関数を呼び出した後に条件falseを追加する必要がないように、プラグイン関数自体から戻る方法を見つけようとしています。if-else
一言で言えば、私が達成しようとしているのは
$(function(){
$('form').submit(function(){
$('.required').border(); // this line should take care of returning true or false for the submit function
});
});
したがって、ユーザーは電話$('.required').border();をかけるだけで、残りは自分で処理する必要があります。