0

1ページに2つのフォームがあります。1つは、そのページが表示されている特定のページの単なるフォームであり、もう1つは、すべてのページにあるサイドフォームです。エラーが発生したフィールドをフォーマットするためのバリデーターを入手しました。不完全なフィールドの周りに赤いボックスが表示されます。これは最初のフォームで機能しますが、2番目のフォームを送信すると、最初のフォームのみがフォーマットされます。最初のフォームのコードを取り出しましたが、2番目のフォームは完全に機能します。私の質問は、クリックされたフォームのみをチェックして送信するようにバリデーターを取得するにはどうすればよいですか？問題を説明するために短いテストページを作成しました。

<!DOCTYPE >
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>
<script type="text/javascript" src="js/mktSignup.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/css.css">
</head>
<body>
<!-- When you submit this form the appropriate red boxes are shown around the errored fields-->
<form id="requestAppointment" method="post" type="actionForm"  action="." name="requestFreeConsultation">
    <label for="name">Your Name</label><br>
    <input type="text" class="stdFormFieldSml defaultInvalid" value="First Name" name="firstName" id="firstName" onclick="if(this.value=='First Name')this.value='';" />
    <input type="submit" name="firstForm" value="Submit" />
</form>
<!-- This form when you hit submit causes red boxes around the previous form's incomplete fields-->
<form name="freeConsultationWidget" action="thank-you.php" method="post">
    <label for="nameMini">Your Name</label><br>
    <input type="text" class="stdFormFieldSml defaultInvalid" value="First Name" name="firstNameMini" id="firstNameMini" onclick="if(this.value=='First Name')this.value='';" />
    <input type="image" name="secondForm" value="submit1"/>
</form>
</body>
</html>

みんなが提案したように、私はjsファイルを投稿するつもりです。（私は標準のjquery検証ファイルを投稿していません。）

    $(document).ready(function(){

    jQuery.validator.addMethod("password", function( value, element ) {
        var result = this.optional(element) || value.length >= 6 && /\d/.test(value) && /[a-z]/i.test(value);
        if (!result) {
            element.value = "";
            var validator = this;
            setTimeout(function() {
                validator.blockFocusCleanup = true;
                element.focus();
                validator.blockFocusCleanup = false;
            }, 1);
        }
        return result;
    }, "Your password must be at least 6 characters long and contain at least one number and one character.");

    // a custom method making the default value for companyurl ("http://") invalid, without displaying the "invalid url" message
    jQuery.validator.addMethod("defaultInvalid", function(value, element) {
        return value != element.defaultValue;
    }, "");

    jQuery.validator.addMethod("billingRequired", function(value, element) {
        if ($("#bill_to_co").is(":checked"))
            return $(element).parents(".subTable").length;
        return !this.optional(element);
    }, "");

    jQuery.validator.messages.required = "";
    $("form").validate({
        invalidHandler: function(e, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                var message = errors == 1
                    ? 'You missed 1 field. It has been highlighted below'
                    : 'You missed ' + errors + ' fields.  They have been highlighted below';
                $("div.error span").html(message);
                $("div.error").show();
            } else {
                $("div.error").hide();
            }
        },
        onkeyup: false,
        submitHandler: function() {
            $("div.error").hide();
            alert("submit! use link below to go to the other step");
        },
        messages: {
            password2: {
                required: " ",
                equalTo: "Please enter the same password as above"  
            },
            email: {
                required: " ",
                email: "Please enter a valid email address, example: you@yourdomain.com",
                remote: jQuery.validator.format("{0} is already taken, please enter a different address.")  
            }
        },
        debug:true
    });

  $("input.home").mask("(999) 999-9999");
  $("input.zipcode").mask("99999");
  $("input.ssNumber").mask("999-999-9999");

/*  
  var creditcard = $("ssNumber").mask("999-999-9999 9999");

  $("#cc_type").change(
    function() {
      switch ($(this).val()){
        case 'amex':
          creditcard.unmask().mask("9999 999999 99999");
          break;
        default:
          creditcard.unmask().mask("9999 9999 9999 9999");
          break;
      }
    }
  );
*/

/*
  // toggle optional billing address
  var subTableDiv = $("div.subTableDiv");
  var toggleCheck = $("input.toggleCheck");
  toggleCheck.is(":checked")
    ? subTableDiv.hide()
    : subTableDiv.show();
  $("input.toggleCheck").click(function() {
      if (this.checked == true) {
        subTableDiv.slideUp("medium");
        $("form").valid();
      } else {
        subTableDiv.slideDown("medium");
      }
  });
*/

});

$.fn.hoverClass = function(classname) {
    return this.hover(function() {
        $(this).addClass(classname);
    }, function() {
        $(this).removeClass(classname);
    });
};
4

2 に答える 2

0

バリデータースクリプトがページの最初のフォームを選択しているようです。

 //javascript code 
 var Form = document.forms[1]; , 

 // you need to select second form, using

 var Form2 = document.forms[2]; ,
于 2012-06-05T13:25:34.550 に答える
0

jqueryを使用している場合は、スクリプトセクションでこれを試すことができます

$('form[name="requestAppointment"]').submit(function(){
   alert('From requestAppointment submited');// Test purpose
   // your logic
});

$('form[name="freeConsultationWidget"]').submit(function(){
   alert('From freeConsultationWidget submited');// Test purpose
   // your logic
});
于 2012-06-05T13:33:01.593 に答える