javascript - 空のフォーム要素をチェックするJavascript、空の場合は送信を拒否、アラートメッセージを送信

Question

だから私はコードを見回して、javascriptを通して何が可能かを見てきました。フォームに空の要素があるかどうかを現在チェックし、空の要素がある場合は送信を拒否するコードがあります。問題は、要素が空の場合のアラートと、要素が空ではないが機能しなかった場合のアラートを追加しようとしたことです。私はそれを編集するために行くのに十分なJavaスクリプトについて知らないようです。

これがフォームです。奇妙なクラス名とdiv名は無視してください。フォームは、Googleドキュメントのスプレッドシートに送信されるため、そのように設定されています。

<form class="quickemailform" action="https://docs.google.com/spreadsheet/formResponse?formkey=dGp3YUxCTGtWd251ZXVfOEtwc1hhWVE6MQ&amp;ifq" method="post" target="hidden_iframe" onsubmit="submitted=true;" id="ss-form" name="frm1" onsubmit="InputChecker()">
        <br>
        <div class="errorbox-good">
            <div class="ss-item ss-item-required ss-text">
                <div class="ss-form-entry">
                    <label class="ss-q-title" for="entry_0">
                    <font class="formtitles">FULL NAME:</font>
                    </br>
                    <label class="ss-q-help" for="entry_0"></label>
                    <input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" size="42">
                </div>
            </div>
        </div>
        <div class="errorbox-good">
            <div class="ss-item ss-item-required ss-text">
                <div class="ss-form-entry">
                    <label class="ss-q-title" for="entry_1">
                        <font class="formtitles" id="compnam">COMPANY NAME:</font>
                        </br>
                    <label class="ss-q-help" for="entry_1"></label>
                    <input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" size="42">
                </div>
            </div>
        </div>
        <div class="errorbox-good">
            <div class="ss-item ss-item-required ss-text">
                <div class="ss-form-entry">
                    <label class="ss-q-title" for="entry_2">
                        <font class="formtitles"  id="emailadd">EMAIL ADDRESS:</font>
                        <br>
                    <label class="ss-q-help" for="entry_2"></label>
                    <input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2" size="42">
                </div>
            </div>
        </div>
        <div class="errorbox-good">
            <div class="ss-item ss-item-required ss-paragraph-text">
                <div class="ss-form-entry">
                    <label class="ss-q-title" for="entry_3">
                        <font class="formtitles"  id="request">Your Request:</font>
                        <font class="fineprint">( SUMMARIZE IMPORTANT DETAILS )</font>
                        <br>
                    </label>
                    <label class="ss-q-help" for="entry_3"></label>
                    <textarea name="entry.3.single" cols="32" rows="10" class="ss-q-long" id="entry_3"></textarea>
                </div>
            </div>
        </div>
            <input type="hidden" name="pageNumber" value="0">
            <input type="hidden" name="backupCache" value="">

        <div class="ss-item ss-navigate"><div class="ss-form-entry">
                <input class="submitbuttons" type="submit" name="submit" value="&nbsp;" src="" border="0" onclick="myFunction()"  />
            </div>
        </div>
    </form>

これは、フィールドが空の場合に送信されるフォームを拒否するJavaScriptです。私はこのコードをオンラインで入手しましたが、自分で書いたわけではありません。テストされて動作しますが、送信を拒否するだけではありません。

<script type="text/javascript">

              (function() {
        var divs = document.getElementById('ss-form').
        getElementsByTagName('div');
        var numDivs = divs.length;
        for (var j = 0; j < numDivs; j++) {
        if (divs[j].className == 'errorbox-bad') {
        divs[j].lastChild.firstChild.lastChild.focus();
        return;
        }
        }
        for (var i = 0; i < numDivs; i++) {
        var div = divs[i];
        if (div.className == 'ss-form-entry' &&
        div.firstChild &&
        div.firstChild.className == 'ss-q-title') {
        div.lastChild.focus();
        return;
        }
        }
        })();
    </script>

可能であれば、フォームが拒否または承認されたときにアラートを追加する方法を知りたいです。また、フォームが拒否された場合、私はそれを持っていたいので、私は次のようなものを持っています

<font class="asterick" div="your_name_ast">*</font>   or   <font class="asterick" div="company_name_ast">*</font>

フォームが送信されないことを拒否された場合は、空の各要素の横にアスタリスクを表示します。フォームに各要素が空かどうかをチェックさせるなど。スクリプトが要素が空であることを検出すると、「フォームが入力されていません。すべての要素を*で確認してください」というアラートがポップアップ表示されます。次に、アスタリスクが表示されます。

これまで読んでくれた人に感謝します。

編集：もっと周りを見回すと、アラートは悪い習慣と見なされているようです。これは本当ですか？要素が空かどうかをユーザーに知らせる方法は他にありますか？

score 1 · Accepted Answer

EdSFの言及のようにjQueryValidate（または同様のもの）を使用するか、送信ボタンを通常のボタンに変更して、クリックすると関数を呼び出してフィールドを検証し、空でない場合はフォームを送信します。私は次のコードをテストしていませんが、あなたはその考えを理解しています。

function validateForm(){
  var isValid = true;

  var elements = document.getElementById('ss-form').getElementsByTagName('input');

  for(var i=0; i < elements.length; i++){
    if(elements[i].value.length < 1){
      isValid = false;
    }
  }

  if(isValid){
    document.getElementById('ss-form').submit();
  }
  else {
    alert('Please fill all required fields');
  }
}

score 0 · Accepted Answer

jQueryを使用すると、やりたいことをすべて実行できます。jQueryは非常に簡単に習得できます。jQueryを使用したコードのサンプルを次に示します。

これはあなたができることのごくわずかな例です。

 <!DOCTYPE html>
<html lang="en">
  <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){

$('#entry_0').blur(function()
{
var Fullname = $(this).val();
$('#nameresult').css("display","none");
if(Fullname.length>0)
    {
    $('#nameresult').css("display","inline-block");
    $('#nameresult').css("color","#00BB00");
    $('#nameresult').html("Valid")
    return true;
    }
    $('#nameresult').css("display","inline-block");
    $('#nameresult').css("color","#ff0000");
    $('#nameresult').html("Input Needed")
    $(this).focus();
    return;    
    });


$('#entry_1').blur(function()
{
var Companyname = $(this).val();
$('#companyresult').css("display","none");
if(Companyname.length>0)
    {
    $('#companyresult').css("display","inline-block");
    $('#companyresult').css("color","#00BB00");
    $('#companyresult').html("Valid")
    return true;
    }
    $('#companyresult').css("display","inline-block");
    $('#companyresult').css("color","#ff0000");
    $('#companyresult').html("Input Needed")
    $(this).focus();
    return;    
    });

  });

</script>
  </head>
  <body>
<form >
FULL NAME:<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" size="42">
<div id="nameresult" style="display: none;"></div>
<br>

COMPANY NAME:<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" size="42">
<div id="companyresult" style="display:none;"></div>
<br>

EMAIL ADDRESS:<input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2" size="42"><br>

Your Request:<textarea name="entry.3.single" cols="32" rows="10" class="ss-q-long" id="entry_3"></textarea><br><br>

<input class="submitbuttons" type="submit" name="submit" value="SUBMIT" src="" border="0" />

    </form>
  </body>
</html>

コードのフォーマットはご容赦ください。すぐに入力しました。

これがjQueryへのリンクです

javascript - 空のフォーム要素をチェックするJavascript、空の場合は送信を拒否、アラートメッセージを送信

3 に答える 3

Related

Reference