如何在名称检查可用后提交表格？

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>中，您有两个不同的按钮，它们都包含type="submit"属性。这意味着点击任一按钮都会尝试提交整个表单。

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

由于您只希望第一个按钮根据您的.click()处理程序进行远程检查，因此您需要阻止它提交表单。您只需将其更改为type="button"即可执行此操作。

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

Answer 2

我认为你应该使用提交活动......

    <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" />
  <%

        }

  %>