jquery - 名前を確認した後にフォームを送信する方法は?

Question

私のコードは正常に動作しています! これは、名前の可用性に基づいてフォームを送信するときの私の JSP ページです。たとえば、名前を保存できる場合はフォームを送信する必要があります。それ以外の場合はフォームを送信しないでください。jspで：

    <form action="<%=editCourseURL%>" method="post" id="register-form" >
    <div class="label1">Course Name</div>
    <input type="text" id="cname" name="cname" value=" "/>&nbsp;
    <input type="submit" id="submit1" value="check availability" />&nbsp; 
    <div id="message" ></div> <br />
    <div class="label2">Course Description</div>
    <input type="text" id="cdesc" name="cdesc" value=""/><br/>
    <div class="label3">Start Date</div>
    <input type="date" name="sdate" id="sdate" value=""/><br/>
    <div class="label4">End Date</div>
    <input type="date" id="edate" name="edate" value="" /><br />
    <input type="submit" id="submit" value="Submit" />
    </form>
    <liferay-ui:success key="key" message="message" />
    <portlet:renderURL var="homeURL">
    <portlet:param name="jspPage" value="/html/course/view.jsp"></portlet:param>
    </portlet:renderURL>
    <portlet:resourceURL var="resourceURL"></portlet:resourceURL>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {


    // Setup form validation on the #register-form element
    $("#register-form").validate({

        // Specify the validation rules
        rules: {
            cname: "required",
            cdesc: "required",
            sdate: "required",
            edate: "required"
        },

        // Specify the validation error messages
        messages: {
            cname: "<p><font color=red>Please enter course  name</p></font>",
            cdesc: "<p><font color=red>Please enter course description</p></font>",
            sdate: "<p><font color=red>please enter start date</p></font>",
            edate: "<p><font color=red>Please enter end date</p></font>"
        },

        submitHandler: function(form) {
            form.submit();
        }
    });
        $("#submit1").click(function(){
             var nameVal = jQuery("#cname").val();

               jQuery.ajax({
                        url :'<%=resourceURL%>',
                        data:{cname:nameVal},
                        type: "POST",
                    dataType: "json",
                     success: function(data){ 
                         {
                            if(nameVal==data["cname"])
                            {

                                $("#message").html("<font color=red>course name already exist.</font>");
                                return true;
                            }   
                            else

                                    $("#message").html("<font color=green>Course name available</font>");  
                                 return false;
                         }
                   }
                    });
              });
        });

</script>

    <liferay-ui:success key="del" message="course-created-sucessfully" />
  <%

        }

  %> 

どんな体でも私を助けてくれますか？コース名の空き状況に基づいてフォームを送信する必要があります

Answer 1

内に<form>は、属性を含む 2 つの異なるボタンがありtype="submit"ます。これは、いずれかのボタンをクリックすると、フォーム全体を送信しようとすることを意味します。

<input type="submit" id="submit1" value="check availability" />

この最初のボタンのみが.click()ハンドラーに基づいてリモート チェックを実行するようにするため、フォームの送信を防止する必要があります。これを行うには、単にtype="button".

<input type="button" id="submit1" value="check availability" />

Answer 2

submit イベントを使うべきだと思います...

    <form action="<%=editCourseURL%>" method="post" id="register-form" >
    <div class="label1">Course Name</div>
    <input type="text" id="cname" name="cname" value=" "/>&nbsp;
    <input type="submit" id="submit1" value="check availability" />&nbsp; 
    <div id="message" ></div> <br />
    <div class="label2">Course Description</div>
    <input type="text" id="cdesc" name="cdesc" value=""/><br/>
    <div class="label3">Start Date</div>
    <input type="date" name="sdate" id="sdate" value=""/><br/>
    <div class="label4">End Date</div>
    <input type="date" id="edate" name="edate" value="" /><br />
    <input type="submit" id="submit" value="Submit" />
    </form>
    <liferay-ui:success key="key" message="message" />
    <portlet:renderURL var="homeURL">
    <portlet:param name="jspPage" value="/html/course/view.jsp"></portlet:param>
    </portlet:renderURL>
    <portlet:resourceURL var="resourceURL"></portlet:resourceURL>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {


    // Setup form validation on the #register-form element
    $("#register-form").validate({

        // Specify the validation rules
        rules: {
            cname: "required",
            cdesc: "required",
            sdate: "required",
            edate: "required"
        },

        // Specify the validation error messages
        messages: {
            cname: "<p><font color=red>Please enter course  name</p></font>",
            cdesc: "<p><font color=red>Please enter course description</p></font>",
            sdate: "<p><font color=red>please enter start date</p></font>",
            edate: "<p><font color=red>Please enter end date</p></font>"
        },

        submitHandler: function(form) {
            form.submit();
        }
    }).submit(function(event){
             var nameVal = jQuery("#cname").val();

               jQuery.ajax({
                        url :'<%=resourceURL%>',
                        data:{cname:nameVal},
                        type: "POST",
                    dataType: "json",
                     success: function(data){ 
                         {
                            if(nameVal==data["cname"])
                            {

                                $("#message").html("<font color=red>course name already exist.</font>");
                                return true;
                            }   
                            else

                                    $("#message").html("<font color=green>Course name available</font>");  
                                 event.preventDefault();
                                 return false;
                         }
                   }
                    });
              });
        });

</script>

    <liferay-ui:success key="del" message="course-created-sucessfully" />
  <%

        }

  %>