个人中心
gpt4 book ai didi

javascript - 如何通过javascript一键计算验证然后提交导航

转载 作者：行者123 更新时间：2023-11-29 22:16:44 25 4
gpt4 key购买 nike

我有一个 js 函数 codeAddress()它通过 google maps javascript api 完成地址并设置全局 js 变量 valid = true , 如果完整地址被识别。它还会更新 <p:inputText> 的值附上完整的地址。

现在我有一个<p:commandButton>我想要

  1. 执行codeAddress()
  2. 如果valid = true提交表格，地址为 <p:inputText>保存在addressBean和
  3. 导航到下一页
  4. 如果valid = false触发 jsf-validator 消息

不幸的是，我的设置仍然不适用于 valid作为确定是否下一页的基本值。看来，值提交给 bean 太迟了。

这是我的 jsf 代码:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
        <script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
</h:head>
<h:body>
    <h:outputScript name="jsf.js" library="javax.faces" target="head"/>
    <h:outputScript library="js" name="bugMaps.js" />
    <body onload="initialize()" />
    <h:form id="addressForm" onsubmit="codeAddress();">
        <p:inputText id="address" required="true"
            validatorMessage="Please enter a valid address." validator="#{addressBean.validate()}">
            <p:ajax update=":addressForm:addressValidate" />
        </p:inputText>
        <h:message id="addressValidate" for=":addressForm:address"/>
        <p:commandButton value="submit"
            onclick="codeAddress();"/>
        <p:inputText id="fullAddress" value="#{addressBean.fullAddress}" />
        <p:inputText id="valid" value="#{addressBean.valid}" />
    </h:form>   
</h:body>
</html>

这是 bugMaps.js:

var geocoder;
var map;
var valid;

function initialize() {
    geocoder = new google.maps.Geocoder();
}

function codeAddress() {

    var address = (document.getElementById('addressForm:address').value + ", Germany");
    geocoder.geocode({'address' : address},function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var latLong = results[0].geometry.location;
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            var country, postal_code, locality, street_number, route;
            for (i = 0; i < results[0].address_components.length; ++i) {
                var component = results[0].address_components[i];
                if (!locality && component.types.indexOf("locality") > -1)
                    locality = component.long_name;
                else if (!postal_code && component.types.indexOf("postal_code") > -1)
                    postal_code = component.long_name;
                else if (!country && component.types.indexOf("country") > -1)
                    country = component.long_name;
                else if (!street_number && component.types.indexOf("street_number") > -1)
                    street_number = component.long_name;
                else if (!route && component.types.indexOf("route") > -1)
                    route = component.long_name;
            }

            if (typeof latLong != "undefined"
                && typeof latitude != "undefined"
                && typeof longitude != "undefined"
                && typeof route != "undefined"
                && typeof street_number != "undefined"
                && typeof postal_code != "undefined"
                && typeof locality != "undefined"
                && typeof country != "undefined"){
                valid = true;

            }
            else{
                valid=false;
            };
            document.getElementById('addressForm:fullAddress').value = results[0].formatted_address;

            jsfSubmit();

        }
        else{
            alert('Geocode was not successful for the following reason: '+ status);
            valid=false;

        }
    }); 
};

function navigateToAnotherPage(data){
    if(valid){
        document.location.href='nextPage.xhtml';
    }
};

function jsfSubmit(){
    jsf.ajax.request(this, event, {execute:"@form", onevent:navigateToAnotherPage});
    alert("nothing"); // FIXME: without this useful alert bean keeps old values and display them on nextPage
};

这是我的 AddressBean.java:

package hoho.main.managebean;

import java.io.Serializable;

import javax.enterprise.context.SessionScoped;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.component.UIInput;
import javax.faces.context.FacesContext;
import javax.faces.validator.ValidatorException;
import javax.inject.Named;

import com.sun.faces.util.MessageFactory;

@Named
@SessionScoped
public class AddressBean implements Serializable {

    private static final long serialVersionUID = 1L;
    private String fullAddress;
    private boolean valid = false;

    public void validate(FacesContext context,
            UIComponent toValidate, Object value) {
        if(!valid){
              String client = toValidate.getClientId(context);  
              FacesMessage msg = MessageFactory.getMessage(UIInput.REQUIRED_MESSAGE_ID, client);  
              throw new ValidatorException(msg);
        }
    }

    public String getFullAddress() {
        return fullAddress;
    }

    public void setFullAddress(String fullAddress) {
        this.fullAddress = fullAddress;
    }

    public boolean isValid() {
        return valid;
    }

    public void setValid(boolean valid) {
        this.valid = valid;
    }

}

这是 nextPage.xhtml:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>

    <h:outputText value="#{addressBean.fullAddress}" />

</h:body>
</html>

最佳答案

您可以使用 jsf.ajax.request在您的 javascript 中提交您的表单。一个例子是

        function navigateToAnotherPage(data){
            //When the request is completed, we are safe to navigate to another page.
            if(data.status == "success"){
                alert("callback is invoked");
                //Go to another page
                document.location.href='destpage.xhtml';
            }
        }

        function jsfSubmit(){
            alert("Do your logic here");
            jsf.ajax.request(this, event, {execute:"@form", onevent:navigateToAnotherPage});
        }

并将这个函数绑定(bind)到一个jsf组件

        <h:commandButton type="button" value="javascriptSubmit" onclick="jsfSubmit()"/>

完整引用在这里:http://docs.oracle.com/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/docs/js-api/symbols/jsf.ajax.html

但是，我不知道如何通过 javascript 调用支持 bean 方法。所以我总是使用两个按钮。当我单击第一个按钮时的 javascript 处理逻辑，然后它触发提交表单并导航到另一个页面的第二个按钮上的单击事件。当然，第二个按钮是 display:none .而且，它有点简单。

此外，验证不起作用，因为验证总是在支持 bean 更新之前发生。我没有看到 javascript var valid 之间的任何链接在 javascript 和 boolean valid 中在支持 bean 中。但是，如果您更新 <p:inputText id="valid" value="#{addressBean.valid}" />使用 javascript，提交输入字段，更新支持 bean valid并使用此 bool 变量进行验证，则验证将始终失败。这是因为之前 boolean valid已更新(例如，true)，首先调用验证方法(因此验证方法可能使用了过时的 valid 。

四处走动是，您将验证器附加到 <p:inputText id="valid" value="#{addressBean.valid}" />而不是 <p:inputText id="address" required="true"...../> .现在，您可以使用 value 获取输入字段的值在 validate(FacesContext context, UIComponent toValidate, Object value) .此处的值是您在页面的输入字段中输入(或 javascript 输入)的值(因此它始终是最新的)。

请注意，此时 valid在支持 bean 中尚未更新。如果验证正常，则 valid已更新并设置为 value你刚刚得到。如果验证失败，则 valid未更新。

简而言之，流程是，0. 构建/恢复组件树。 1. 转换、验证。 2. 更新支持 bean 中的值。 3. 调用支持 bean 方法 4. 呈现页面。

关于javascript - 如何通过javascript一键计算验证然后提交导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14716606/

25 4 0
文章推荐： Javascript 数组 indexOf 返回未定义
文章推荐： javascript - 具有自定义几何体的网格的 Three.js 纹理
文章推荐： php - 使用 javascript/ajax/php 提交 html 表单
文章推荐： javascript - getElementById javascript 未定义
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com