0

Joomla フロント エンドに新しいコンポーネントを追加しています。そこでは、フォームが提供され、エラーメッセージをスパンに出力する必要があるため、Joomla Behavior Validation の代わりにフォーム検証に JavaScript を使用します。

私のフォームは次のとおりです。

<form action="" method="post" name="downloadtender" id="downloadtender" >
    <br><br>
    <fieldset>
        Name:<br> 
        <input name='uname' type='text' id='uname'  onblur='valid(this)' /><span id='inv' style="color: red;font-size: 12px;">*</span>
        <br>
        Designation:<br>
        <input name='desig' type='text' id='desig' onblur='valid(this)'/><span id='inv' style="color: red;font-size: 12px;">*</span>
        <br>
        Company:<br>
        <input name='comp' type='text' id='comp' onblur='valid(this)'/><span id='inv' style="color: red;font-size: 12px;">*</span>
        <br>
        Mobile Number:<br>
        <input name='phone' type='text' id='phone'  onblur='valid(this)'/><span id='inv' style="color: red;font-size: 12px;">*</span>
        <br>
        Email id:<br>
        <input name='email' type='text' id='email' onblur='valid(this)'/><span id='inv' style="color: red;font-size: 12px;">* </span>
        <br><br>
        <input type="submit" name="submit1"  value="Register" />
    </fieldset>
    <?php echo JHTML::_( 'form.token' ); ?>
</form>

すべてのエラー メッセージをクリアする前に、フォームの送信を防ぐにはどうすればよいですか?

編集

<script type="text/javascript">

    function valid(elem){
        var input=[document.getElementById('uname'),document.getElementById('desig'),document.getElementById('comp'),document.getElementById('phone'),document.getElementById('email')];
        for(var i=0;i<input.length;i++){
            if(input[i].value==''&& elem.id==input[i].id){
                elem.focus();
                switch(input[i].id){
                    case 'uname':
                        document.getElementById('uname-inv').innerHTML="*Field Required*";
                        break;
                    case 'desig':
                        document.getElementById('desig-inv').innerHTML="*Field Required*";
                        break;
                    case 'comp':
                        document.getElementById('comp-inv').innerHTML="*Field Required*";
                        break;
                    case 'phone':
                        document.getElementById('phone-inv').innerHTML="*Field Required*";
                        break;
                    case 'email':
                        document.getElementById('email-inv').innerHTML="*Field Required*";
                        break;
                }
            }
            else{
                switch(input[i].id){
                    case 'uname':
                        document.getElementById('uname-inv').innerHTML="";
                        break;
                    case 'desig':
                        document.getElementById('desig-inv').innerHTML="";
                        break;
                    case 'comp':
                        document.getElementById('comp-inv').innerHTML="";
                        break;
                    case 'phone':
                        document.getElementById('phone-inv').innerHTML="";
                        break;
                    case 'email':
                        document.getElementById('email-inv').innerHTML="";
                        break;
                }
            }
        }

        if(document.getElementById('email').value!=''){
            var t=document.getElementById('email');
            var x=t.value.indexOf('@');
            var y=t.value.lastIndexOf('.');
            if((x<1)||(y<x+2)||(y+2>t.length)){
                $er=1;
                document.getElementById('email-inv').innerHTML="*Please provide correct email address*"; 
            }
            else{
                document.getElementById('email-inv').innerHTML=""; 
            }
        }
    }

</script>
4

1 に答える 1

0

id="inv"ID が一意でなければならない複数の要素があります。

スパンの名前を次のように変更します。

<span id="uname-inv" style="color: red;font-size: 12px;">*</span>

そしてあなたのJSを参照してください：

case 'uname':
    document.getElementById('uname-inv').innerHTML="*Field Required*";
    break;

これは、フォームの検証を処理するための最適化された、または理想的な方法とはほど遠いことに注意してください。jQuery Validationの使用を見てください。

編集：

検証が失敗したときにフォームが送信されないようにするには、form要素を次のように修正します。

<form action="" method="post" name="downloadtender" id="downloadtender" onsubmit="return validate()">

次に、すべてのフィールドを検証し、検証に合格した場合または検証に失敗した場合validate()に返す関数を作成します。truefalse

于 2013-10-22T09:48:53.243 に答える