处理JQuery中的多个事件无效，提交事件挂起

我需要添加3个事件

隐藏页面加载时的字段。 基于radiobutton值隐藏字段的步骤 在用户单击“提交”按钮时执行某些处理 但是，当我添加代码时，submit停止工作。但是，当我删除上面提到的第1点和第2点的jquery处理时，submit可以正常工作。如果有任何错误，请检查并告诉我。非常感谢你的帮助

HTML代码：

<form action="/BGPAsService/port/save" method="post" id="portform" >
                <fieldset class="form">

<div  id="port_rule" class="fieldcontain  required">
    <label for="portRule">
        Port Rule
        <span class="required-indicator">*</span>
    </label>
    <input type="text" id="portrulevalue" name="portRule" maxlength="80" required="" value="" />

</div>

<div id="portradio" class="fieldcontain required">
    <label for="PortOption">
        Port Option
        <span class="required-indicator">*</span>
    </label>

     <input type="radio" name="PortOption" value="value" class="fieldcontain" id="portradiovalue" />Port Value&nbsp;


     <input type="radio" name="PortOption" value="range" class="fieldcontain" id="portradiovalue" />Port Range&nbsp;


</div>

<div id="start_port" class="fieldcontain required">
    <label for="portStart">
        Port Start
        <span class="required-indicator">*</span>
    </label>
    <input type="text" name="portStart" maxlength="5" required="" value="" id="portStart" />

</div>

<div id="end_port" class="fieldcontain required">
    <label for="portEnd">
        Port End
        <span class="required-indicator">*</span>
    </label>
    <input type="text" name="portEnd" maxlength="5" required="" value="" id="portEnd" />

</div>
</fieldset></form>

Jquery代码：

           $(document).ready(function(){
                $("#port_rule").hide();

                 $('#portradio').on('click',function(e) {
                   if ($(':radio[name= "PortOption"]:checked').val() == 'value') {
                       $("#end_port").hide();
                   }else{
                       $("#end_port").show();
                   } 
               });

                $('#portform').on ('submit', function(event) {
                    alert("test");
                    var portrule = "";

                    if ($(':radio[name= "PortOption"]:checked').val() == 'value'){
                        portrule = portrule.concat('=');
                        portrule = portrule.concat($('input:text[name= "portStart"]').val());
                    }
                    else
                    {
                        portrule = portrule.concat('>=');
                        portrule = portrule.concat($('input:text[name= "portStart"]').val());
                        portrule = portrule.concat('&<=');
                        portrule = portrule.concat($('input:text[name= "portEnd"]').val());
                    }

                    document.getElementById("portrulevalue").value = portrule;

                });

           });

名为portRule的隐藏字段在HTML中标记为必需字段，因此浏览器在运行JS代码之前尝试对其进行验证。当它在submit上找不到值时，它会尝试将注意力集中在它身上，但找不到，因为它是隐藏的。然后抛出JavaScript错误，代码停止工作

将该字段设为非必需字段：

 <input type="text" id="portrulevalue" name="portRule" maxlength="80" value="" />

---

在页面加载时隐藏元素的最佳方法是在CSS中添加display:none。检查JavaScript控制台是否有错误。我正在使用grails。因此，我将portRule设置为hiddenField，将endPort设置为notrequired。无论如何，我需要添加自定义验证，如果端口选项为Range，则不允许null。还有一件事-您的单选按钮不应具有相同的ID portradiovalue

 $('[name="PortOption"],[name="portStart"],[name="portEnd"]').on('change', function (event) {
        var portrule = "";
        // etc.