0

フォームの送信時に特定のタイプのすべての要素をチェックし、要素の 1 つが検証されない場合は送信を防止する機能があります。jQuery を使用してページ内のすべてのフォームを検索し、この関数をそれらの「onsubmit」イベントにアタッチしました。

これに関する問題は、関数が特定のタイプのすべての要素をチェックするため、別のフォームに無効な要素がある場合、フォームが送信されていない場合でもフォームが送信されないため、それらは重要ではありません。

これを改善するために、関数を変更して、特定の型のすべての要素をチェックしてフォームのパラメーターを受け入れ、そのフォームの要素のみを検証するようにしました。ここまでは順調ですね。

しかし、jQueryでページ上のすべてのフォームに関数を付ける場合、フォームのパラメータを指定するにはどうすればよいのでしょうか?

現時点でのjQueryコードは次のとおりです。

jQuery("form").submit(function() {
    return CheckElements();
});

現在のフォームを ID またはオブジェクトとして渡す必要があります。何かのようなもの:

jQuery("form").submit(function() {
    return CheckElements(SOME WAY OF PASSING THE FORM);
});

これは可能ですか?可能であれば、どのように実行できますか?

4

3 に答える 3

2
$("form").submit(function() {
    return CheckElements(this);
});
于 2012-04-20T14:42:04.887 に答える
2

単純に引数として渡すことができます:return CheckElements(this);

関数CheckElementsは、たとえば次のようになります。

function CheckElements(form) {
    $(':input', form).each(function() { /*do something*/ });
}

this関数内のフォームをポイントしたい場合は、関数return CheckElements.call(this);を呼び出すために使用できます。次に、パラメーターは必要なく、関数内で実行できます。$(':input', this)

于 2012-04-20T14:38:22.110 に答える
1

この場合、最初にクラスまたは ID をフォームに割り当てる必要があります。たとえば。

<div class='error' style="display:none; color:red;">the entry by you was invalid</div>
<form action="XXXX" method="XXXX" class='myForm'>
<!-- lets say you have following fields -->
name : <input type = 'text' name = 'name' class = 'field1'>
age : <input type = 'text' name = 'age' class = 'field2'>
<input type = 'submit' id='submit_btn'>
</form>

関数 onSubmit を呼び出す代わりに、次のようにして JQuery 関数を呼び出すことができます

$(function(){
$("#submit_btn").click(function(){
var msg = checkElement();// your function must return false on error
if(msg == FALSE)
{
$('.error').show(); //create a div with style dispay:none which contains error message to show on error
}
else
{
var field1 = $('.field1').attr('value');//fetching the field1 content
var field2 = $('.field2').attr('value');//fetching the field2 content

//submit via ajax
$.ajax({
url: 'relative path to the file eg. file.php',
dta: 'f1='+field1+'&f2='+field2,//placeyour own data here
type: 'get or post',
success:function()
{
alert('done');//perform your action
}
});
return false;
}
});
});

これがあなたに役立つことを願っています

于 2012-04-20T14:59:09.817 に答える