Onclick 양식 유효 (양식 만 유효)

양식이 유효한 경우 인 경우 먼저 jQuery 유효성 검사 라이브러리 jquery.validate.min.js 및 으로 유효성을 검사하려는 html 양식이 있습니다. 양식을 위치에 제출하십시오.Onclick 양식 유효 (양식 만 유효)

<html> <head> <link rel="stylesheet" href="../../common/view/css/bootstrap.min.css" type="text/css"> <script src="../../common/view/js/jquery.js"></script> <script src="../../common/view/js/bootstrap.min.js"></script> <script src="../../common/view/js/jquery.validate.min.js"></script> </head> <body> <form method="post" action="stock-c.php" id="issueform" name="issueform"> <input type="text" name="pid"/> <input type="button" name="button1" id="button1"/> <script type="text/javascript" src="js/issueValidation.js"></script>  <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog">  <input type="submit" value="submit"/>  </div> </div> </from> </body> </html>

issueValidation.js

$(document).ready(function() { $validator= $("#issueform").validate({ rules: { pid: "required", }, messages: { pid: "Please enter a value", }, errorElement: "em", errorPlacement: function (error, element) { // Add the `help-block` class to the error element error.addClass("help-block"); if (element.prop("type") === "checkbox") { error.insertAfter(element.parent("label")); } else { error.insertAfter(element); } }, highlight: function (element, errorClass, validClass) { $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success"); }, unhighlight: function (element, errorClass, validClass) { $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error"); } }); $('#button1').on('click', function() { $("#issueform").valid(); //everything works upto here if($validator.noOfInvalids()===0){ //this code doesn't work $('#myModal').modal('toggle'); } }); });

Explain1 :

나는 다음과 같은 시도 내가 양식 태그 내에 모달 클래스에 내 제출 버튼을 배치 할 때 있도록 클릭하면 양식 데이터가 전송됩니다.

이상적으로 양식 유효성이 확인 될 때까지 제출을 중단하고 싶습니다. 양식이 유효한 경우 모달에서 양식 데이터를 검토하고 제출 단추를 클릭하여 제출할 수 있어야합니다.

모달을 초기화하기 위해 jQuery 유효성 검사 플러그인 (폼에 유효 기간이없는 경우에만 실행 됨)의 submitHandler를 사용했지만 입력 [입력 = "버튼"]을 변경해야 할 필요가 있습니다 [ type = "submit"] 처리기는 제출 버튼에서만 작동하므로 그런 다음 동일한 양식의 두 개의 제출 버튼으로 끝나고 양식이 제대로 제출되지 않습니다.

이 문제를 해결할 수 있도록 도와주세요. 다시 요약하면 양식에 입력 된 데이터의 유효성을 확인하고 사용자에게 모달로 확인을 요청해야합니다. 사용자가 모달로 확인하면 양식의 데이터가 제출됩니다. 내 방법이이 결과를 얻기 위해 불필요한 방법 인 경우 위에 언급 한 요구 사항을 준수하는 한 다른 대안도 환영합니다. 고맙습니다.

출처

2016-07-20 user3889963

이상적으로 양식 유효성이 검사 될 때까지 제출을 중단하고 싶습니다.

jQuery Validate 플러그인이 이미 수행하고있는 작업입니다.

귀하의 코드 ... 내가 당신을 알고

$('#button1').on('click', function() { 
    if ($("#issueform").valid()) { 
     // do something here when the form is valid 
     $('#myModal').modal('toggle'); 
    } 
});

...

As per docs

$('#button1').on('click', function() { 
    $("#issueform").valid(); //everything works upto here 
    if($validator.noOfInvalids()===0){  //this code doesn't work 
     $('#myModal').modal('toggle'); 
    } 
});

는 .valid()은 부울을 반환하므로 코드의 클릭 핸들러 부분은 위에서 크게 단순화 할 수있다 이미 언급했지만 다음 내용은 향후 독자를위한 것입니다.

click 처리기는 다음과 같습니다. input이 type="button"이기 때문에 필요합니다.

type="submit"을 사용하는 경우 클릭이 플러그인에 자동으로 캡처되므로 click 처리기가 필요하지 않습니다. 또한이 경우 양식이 유효 할 때 실행할 코드를 포함하려면 the submitHandler option을 사용하십시오.

출처

2016-07-20 14:46:22 Sparky

아름답고 단순 ... :-) 나는 그 문서에서 그 반환을보고 싶다. 고마워요 ... – user3889963

Onclick 양식 유효 (양식 만 유효)

답변

관련 문제