0

htmlコード

<div id="signup">
    <form method="POST" action="#">
        <p>
            <label>Frist Name</label>
            <input type="text" id="sufName"/>
        <p>
        <p>
            <label>Last Name</label>
            <input type="text" id="sulName"/>
        <p>
        <p>
            <label>Email</label>
            <input type="text" id="suEmail"/>
        <p>
        <p>
            <label>Mobile Number</label>
            <input type="text" id="suMNumber"/>
        <p>
        <p>
            <label>Password</label>
            <input type="password" id="suPassword"/>
        <p>
        <p>
            <label>Re Password</label>
            <input type="password" id="suRePassword"/>
        <p>
        <p>
            <input type="submit" class="button" value="sign up" onclick="signup()"/>
        </p>
    </form>
</div>

サインアップボタンを押すと、空の入力ファイルがないことを確認し、入力フィールドが空の場合は、その入力フィールドに残されたエラーメッセージを追加します

JavaScript コード

function signup(){
    var inputs = document.getElementsByTagName('input');
    for(var i=0;i<inputs.length;i++){
        alert('d');
        isEmptyInput(inputs[0].id);
    }
}
function addErrorMessage(element){
    clearErrorMessage();
    var error = document.createElement('span');
    error.setAttribute('class', 'errorMessage');
    error.innerHTML="select coutry first";
    element.appendChild(error);
}
function clearErrorMessage(){
    var errors = document.getElementsByClassName('errorMessage');
    for(var i=0;i<errors.length;i++){
        var kk=errors[i].parentNode;
        kk.removeChild(errors[i]);
    }
}
function isEmptyInput(input){
    if(input.value===""){
        var parent = input.parentNode;
        addErrorMessage(parent);
    }
}

しかし機能しません、関数 isEmptyInput でも jsfiddle コピー コードが機能しません

4

4 に答える 4

1

それを試してください：

$("input[type=submit]").click(function () {
    var err = false;
    $(this).closest("form").find("input[type='text']").each(function () {
        if ($(this).val() == "") {
            addErrorMessage(this); //or any other error handling you like                
            err = true;
        }
    });
    return !err;        
});

フォーム検証用のjqueryプラグインを作成しました。見てみな。それが役に立てば幸い。

于 2012-05-12T13:00:54.430 に答える
1

  1. を使用しているためjquery、非常に簡単に行うことができます。

  2. また、pタグを適切に閉じていません。

  3. 最初に、送信時にデフォルトの機能を防止する必要があります。

  4. エラースパンの数が送信ごとに増加するため、呼び出しごとに追加するのは適切ではありません。

以下のように HTML を変更し、jquery を試してみてください。

HTML:

<form method="POST" action="#">
    <p>
        <label>Frist Name</label>
        <input type="text" id="sufName"/>
        <span class="errorMessage"></span>
    </p>
    <p>
        <label>Last Name</label>
        <input type="text" id="sulName"/>
        <span class="errorMessage"></span>
    </p>
    <p>
        <label>Email</label>
        <input type="text" id="suEmail"/>
        <span class="errorMessage"></span>
    </p>
    <p>
        <label>Mobile Number</label>
        <input type="text" id="suMNumber"/>
         <span class="errorMessage"></span>
    </p>
    <p>
        <label>Password</label>
        <input type="password" id="suPassword"/>
        <span class="errorMessage"></span>
    </p>
    <p>
        <label>Re Password</label>
        <input type="password" id="suRePassword"/>
        <span class="errorMessage"></span>
    </p>
    <p>
        <input type="submit" class="button" value="sign up"/>
    </p>
</form>

** Jquery**

 $(document).ready(function(){
  $('form').on('submit', function(e){
   e.preventDefault();
   var errorCount = 0;
   $('span.errorMessage').text(''); // reset all error mesaage
   $('input').each(function(){
     var $this = $(this);
     if($this.val() === ''){
        var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
        $this.next('span').text(error);
        errorCount = errorCount + 1;   
      }
  });
  if(errorCount === 0){
    $(this).submit(); // submit form if no error
  }
  });
 });

フィドル: http://jsfiddle.net/h9njC/11/

于 2012-05-12T13:14:42.287 に答える
1

デモ: http://jsfiddle.net/h9njC/9/

HTML:

<form method="POST" action="#" onSubmit='return false;'>

js:

function signup(){
    var inputs = document.getElementsByTagName('input');
    clearErrorMessage();
    for(var i=0;i<inputs.length;i++){
        isEmptyInput(inputs[i]);
    }
    return false;
}
function addErrorMessage(element,field){
    var error = document.createElement('span');
    error.setAttribute('class', 'errorMessage');
    error.innerHTML = "select "+field+" first";
    element.appendChild(error);
}
function clearErrorMessage(){
    var errors = document.getElementsByClassName('errorMessage');
    for(var i=0;i<errors.length;i++){
        var kk=errors[i].parentNode;
        kk.removeChild(errors[i]);
    }
}
function isEmptyInput(input){
    if(input.value===""){
        var parent = input.parentNode;
        var field = parent.getElementsByTagName('label');
        addErrorMessage(parent,field[0].innerHTML);
    }
}​
于 2012-05-12T12:45:38.913 に答える
0

送信ボタンを使用しているためです。

フォームのOnSubmit()イベントにコードを追加し、検証が失敗したときに false を返すか、ボタンを通常のボタンに変更してから、検証が成功したときにメソッド内でtype='button'呼び出します。document.forms[0].submit()signup()

于 2012-05-12T12:47:43.553 に答える