0

2つの機能があります。1つはフォームの名前フィールドの情報を検証し、もう1つはそれらのフィールドの情報を取得してアラートボックスに出力します。これとは別に、これらの関数は正常に機能します。両方を呼び出さなければならないので、ラッパー関数を作成しました。関数は実行されますが、フォーカスする代わりに更新されます。奇妙なことに、最初のフィールドをチェックすると、.focus（）;を含めてすべて問題ありませんが、2番目のフィールドを検証しようとすると.focus（）;になります。動作せず、ページが更新されます。どんな助けでもいただければ幸いです。（最初の質問を修正してこれを追加しようとしましたが、保存しようとしても何も起こりませんでした。）

function main() {
  var test = validate();
  if (test == true) {
    concatinate();
    return true;
  }
}

function validate() {
  //alert ("TEST!!!");
  var first = document.getElementById('firstname').value;
  if (first.length == 0 || first.length > 25) {
    alert("Please enter your first name, no longer than 25 chracters.");
    document.getElementById('firstname').focus();
    return false;
  }
  var last = document.getElementById('lastname').value;
  if (last.length == 0 || last.length > 25) {
    alert("Please enter your last name, no longer than 25 characters.");
    document.getElementsByName('lastname').focus();
    return false;
  }
  var title = document.getElementById('title').value;
  if (document.getElementById('title').selectedIndex == 0) {
    alert("Please select your salutation");
    document.getElementById('title').focus();
    return false;
  }
  return true;
}

function concatinate() {
  var first = document.getElementById('firstname').value;
  var last = document.getElementById('lastname').value;
  var title = document.getElementById('title').value;
  var fullname = title + " " + first + " " + last;
  var printFull = "Welcome,  " + fullname;
  alert(printFull);
}

<form name="name" form id="name" method="post" onsubmit="return main();"> 
        Salutation: <select name="title" select id="title">
            <option selected="Please Select">Please select</option>
            <option value="Mr.">Mr.</option>
            <option value="Mrs.">Mrs.</option>
            <option value="Miss">Miss</option>
        </select><br><br>
        First Name : <input type="text" input id="firstname" name="firstname">
        Last Name : <input type="text" input id="lastname" name="lastname"><br><br>
        <input type="submit" value="Submit"><br><br>
</form>
4

2 に答える 2

2

フォームに誤った属性「form」があり<form>、「select」がタグの中央にあり、<select>「input」が<input>タグにあります。それらが何のためにあるのか、またはそれらがあなたに問題を引き起こしているのかどうかはわかりませんが、それでもあなたはそれらを取り除くべきです。

また、あなたの問題はこの行です：

document.getElementsByName('lastname').focus();

document.getElementsByName()配列を返しますが、配列にfocus()メソッドはありません。これにより、姓の検証で問題が発生していました。

focus()他の通話と一致するように変更します。

document.getElementById('lastname').focus();

main()メソッドの一時変数も削除しました。

function main(form) {
    if (validate()) {
        concatinate();
        return true;
    }
    return false;
}

作業デモ： http： //jsfiddle.net/cFsp5/4/

于 2013-02-26T02:45:16.873 に答える
1

検証に合格しなかった場合、main関数は戻る必要があります。falseそれ以外の場合は、が返さundefinedれ、フォームはとにかく送信されます（これはあなたが説明したものです）。したがって、簡単な修正は次のようになります。

function main() {
  var test = validate();
  if (test == true) {
    concatinate();
    return true;
  }
  return false;
}

http://jsfiddle.net/LhXy4/

于 2013-02-26T03:04:40.240 に答える