jquery - 验证阻止命令按钮

Question

大家好，我有一些输入框，用户可以在其中输入详细信息并提交它，这需要进行一些验证，而不是空等，这一切正常，但是如果用户有，我有一个导航按钮可以回家由于错误或其他原因来到此页面，但是当用户按下此按钮时，它也会调用验证并要求用户输入详细信息，这对于主页按钮来说是不好的，有什么方法可以让验证在以下情况下运行:用户按下此按钮？这是一个 primefaces 命令按钮

这是代码，如果我使用链接，我可以很好地导航，但为了用户体验，我宁愿使用命令按钮

            <h:form>
                <p:growl id="growl" showDetail="true" sticky="true" />  
                <!--ajax messages working now -->

                <p:panel header="Enter details">  
                    <h:panelGrid columns="2">
                        <h:outputLabel value="#{bundle.CreateUserdetailsLabel_id}" for="id" />
                        <h:inputText id="id" value="#{userdetailsController.selected.id}" title="#{bundle.CreateUserdetailsTitle_id}" required="true" requiredMessage="#{bundle.CreateUserdetailsRequiredMessage_id}"/>
                        <h:outputLabel value="#{bundle.CreateUserdetailsLabel_username}" for="username" />

                        <h:inputText id="UserName" value="#{userdetailsController.selected.username}" title="#{bundle.CreateUserdetailsTitle_username}" required="true" 
                                     requiredMessage="Username is required"             
                                     label="UserName" >
                            <f:validator validatorId="richard.validator.UserNameValidator" />
                        </h:inputText>

                    </h:panelGrid>
                    <br />
                    <p:commandButton  action="#{userdetailsController.create}" value="#{bundle.CreateUserdetailsSaveLink}" update="growl"/>

                    <br />
                    <br />

                    <p:commandButton action="#{userdetailsController.prepareList}" value="#{bundle.CreateUserdetailsShowAllLink}" immediate="true"/>
                </p:panel>
                <br />
                <br />


                <!--
                Trying to use a command button to navigate however it is requiring the user enter details first and this is not acceptable so looking for a solution

                <p:commandButton action="{naviagation.buttonHome}" value="Home" icon ="ui-icon-home"  ajax="False"/>
                                        <p:commandButton action="{bundle.ListUserdetailsIndexLink}" value="List of all current records" icon ="ui-icon-person"  ajax="False"/>
                -->  

                <h:link outcome="/index" value="#{bundle.ListUserdetailsIndexLink}"/>

            </h:form>

谢谢

Answer 1

您不应该为了页面到页面的导航而提交整个表单并触发 POST 请求。这不仅是错误的，而且不利于用户体验和搜索引擎优化。

使用<p:button>相反。

<p:button value="Home" outcome="/index" icon="ui-icon-home" />
<p:button value="List of all current records" outcome="/list" icon="ui-icon-person" />

如果您确实需要调用某个操作(我宁愿传递一个请求参数，并让目标 View 的 <f:event>/<f:viewAction> 对其执行业务逻辑)，则添加 process="@this"至<p:commandButton>以避免处理整个表格。请注意immediate="true"服务于完全不同的目的，不应用于绕过整个表单的处理的特定要求。