0

変更できない次のようなフォームに出くわしました。

<form id="mx_locator" name="mx_locator" method="post" action="search-results">

  <!-- form elements -->
  <span><input type="image" src="/images/search.png" onclick="loader()"></span>

</form>

フォーム データを転送し、クリックすると結果ページを生成することを認識している CMS の内部にあります。ローダー関数呼び出しは、何らかの効果のためにクラスの追加/削除を処理するだけです。

フォームを検証する JavaScript を作成するように依頼されました。郵便番号フィールドと都市フィールドがあります。どちらか一方を記入する必要があります。両方ではなく、どちらか一方です。したがって、誰かがそのボタンをクリックすると、私の JavaScript は送信を停止し、それらのフィールドをチェックして、問題がない場合にのみ先に進む必要があります。

要するに、どうすればこれを行うことができますか？何よりも、CMS がフォームを制御しているため、js が何をしてもフォームが処理されるのではないかと心配しています。フォームのhtmlをまったく変更できません。JSを追加するだけです。

4

2 に答える 2

0

onsubmit 属性を form タグに追加することから始めます。

<form id="mx_locator" onsubmit="return ziporcity(this)" name="mx_locator" ...

次に、関数 ziporcity を含むかリンクするスクリプト タグをドキュメントに追加します。これは次のように記述できます。

<script>
function ziporcity(f) { return /\d{5}/.test(f['zipFieldName'].value) || /\S/.test(f['cityFieldName'].value); }
</script>

この単純な検証関数は、どちらか一方または両方が true であること、zip フィールドに 5 桁の連続した数字 (9 桁も合格) が含まれていること、および/または都市フィールドに空白以外が含まれていることを確認します。

zipFieldName をフォームの zip フィールドの name="..." 属性に含まれる名前に変更し、cityFieldName を都市フィールドの名前に変更する必要があります。

于 2013-03-23T00:41:59.773 に答える
0 
<script> 
$(document).ready(function() {
    $("#mx_locator").submit(function() {  
      var isValid = callSomeValidationFunctionThatReturnTrueFalse();
      return isValid;  // the key is return false will prevent submit
    });
});
</script>

jQuery を含める必要があります。フォームの送信イベントが CMS によって完全にオーバーランされているという奇妙なことがある場合は、非表示にしてその場所に新しいフォームを作成してください。

<script> 
$(document).ready(function() {
    // save old form html and hide
    var myForm = $("#mx_locator");
    var formHtml = myForm.html();
    myForm.html("").hide();

    // append new form in its place and 
    var myNewForm = $('<form id="mx_locator2" name="mx_locator2" .../></form>');
    myNewForm.html(formHtml);
    myNewForm.insertAfter(myForm);
});
</script>
于 2013-03-23T01:04:23.163 に答える