0

私はかなり大きなフォームを持っており、PHP 検証 (ofc) と共に jQuery を使用したいと考えています。私はjQueryの初心者ですが、見回した後、いくつかのコードがうまく機能しています。テキスト ボックスの長さをチェックしており、一定の長さ未満の場合は送信できません。エントリが低い場合、テキスト ボックスの色が赤に変わります。

私が抱えている問題は、フォームが非常に大きいため、時間がかかり、すべてのボックスを検証するための多くのコードが必要になることです。したがって、毎回関数を作成するのではなく、すべての変数をループできる方法があるのではないかと考えました。

ここに私が持っているものがあります:

var form = $("#frmReferral");
var companyname = $("#frm_companyName");
var companynameInfo = $("#companyNameInfo");
var hrmanagername = $("#frm_hrManager");
var hrmanagernameInfo = $("#hrManagerInfo");

form.submit(function(){
    if(validateCompanyName() & validateHrmanagerName())
        return true
    else
        return false;
});

検証関数

function validateCompanyName(){
    // NOT valid
    if(companyname.val().length < 4){
        companyname.removeClass("complete");
        companyname.addClass("error");
        companynameInfo.text("Too Short. Please Enter Full Company Name.");
        companynameInfo.removeClass("complete");
        companynameInfo.addClass("error");
        return false;
    }
    //valid
    else{
        companyname.removeClass("error");
        companyname.addClass("complete");
        companynameInfo.text("Valid");
        companynameInfo.removeClass("error");
        companynameInfo.addClass("complete");
        return true;
    }
}

function validateHrmanagerName(){
    // NOT Valid
    if(hrmanagername.val().length < 4){
        hrmanagername.removeClass("complete");
        hrmanagername.addClass("error");
        hrmanagernameInfo.text("Too Short. Please Enter Full Name.");
        hrmanagernameInfo.removeClass("complete");
        hrmanagernameInfo.addClass("error");
        return false;
    }
    //valid
    else{
        hrmanagername.removeClass("error");
        hrmanagername.addClass("complete");
        hrmanagernameInfo.text("Valid");
        hrmanagernameInfo.removeClass("error");
        hrmanagernameInfo.addClass("complete");
        return true;
    }
}

50 以上の入力ボックスを見るとわかるように、これは非常に大きくなります。たぶんループが機能すると思いましたが、どのように進めればよいかわかりません。おそらく、すべての変数を含む配列ですか? どんな助けでも素晴らしいでしょう。

4

3 に答える 3

1

これは私がすることであり、jQuery バリデータ プラグインの仕組みを簡略化したものです。

この場合、id を介して個々の入力を選択する代わりに、属性を追加して、data-validation検証するフィールドを示します。

<form id='frmReferral'>
  <input type='text' name='company_name' data-validation='required' data-min-length='4'>
  <input type='text' name='company_info' data-validation='required' data-min-length='4'>
  <input type='text' name='hr_manager' data-validation='required' data-min-length='4'>
  <input type='text' name='hr_manager_info' data-validation='required' data-min-length='4'>
  <button type='submit'>Submit</button>
</form>

次に、フォームの送信イベントをキャッチするための小さな jQuery プラグインを作成し、選択されたすべての要素をループして、$form.find('[data-validation]')それらに対して一般的なパス/フェイル検証関数を実行します。そのプラグインがどのように見えるかの簡単なバージョンは次のとおりです。

$.fn.validate = function() {
  function pass($input) {
    $input.removeClass("error");
    $input.addClass("complete");
    $input.next('.error, .complete').remove();
    $input.after($('<p>', {
      class: 'complete',
      text: 'Valid'
    }));
  }

  function fail($input) {
    var formattedFieldName = $input.attr('name').split('_').join(' ');
    $input.removeClass("complete");
    $input.addClass("error");
    $input.next('.error, .complete').remove();
    $input.after($('<p>', {
      class: 'error',
      text: 'Too Short, Please Enter ' + formattedFieldName + '.'
    }));
  }

  function validateRequired($input) {
    var minLength = $input.data('min-length') || 1;
    return $input.val().length >= minLength;
  }

  return $(this).each(function(i, form) {
    var $form = $(form);
    var inputs = $form.find('[data-validation]');
    $form.submit(function(e) {
      inputs.each(function(i, input) {
        var $input = $(input);
        var validation = $input.data('validation');
        if (validation == 'required') {
          if (validateRequired($input)) {
            pass($input);
          }
          else {
            fail($input);
            e.preventDefault();
          }
        }
      })
    });
  });
}

次に、次のようにプラグインを呼び出します。

$(function() {
  $('#frmReferral').validate();
});
于 2013-08-17T17:20:51.703 に答える
0 
    form.submit(function(){
        if(validateCompanyName() && validateHrmanagerName()) // Its logical AND not bitwise
            return true
        else
            return false;

You can do this.

var x = $("input[name^='test-form']").toArray();

for(var i = 0; i < x.length; i++){
  validateCompanyName(x[i]);
 validateHrmanagerName(x[i]);
}
于 2013-08-17T16:41:53.693 に答える
0

単一のセレクターを使用して、jQuery で使用するすべてのクラスを指定できます。次に、検証関数を使用してループし、すべてのケースを処理します。

$(".validate").each(//do stuff);
于 2013-08-17T16:31:00.280 に答える