Block UI after successful of fields verification

I use a JSF 2.2 with a Primefaces 5.3. I have to create a form which will be work like this:

After pushing a button:

If all required fields are filled in, the page is blocked (due to the sending of data to the database) as long as the data are sent.
If one of the required fields aren't filled in, the page isn't blocked.

Could you tell me how can I do it?

This is a xhtml page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pm="http://primefaces.org/mobile"
      xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
    <h:head></h:head>
    <h:body id="page">

        <f:metadata>
            <f:viewAction action="#{loginController.start()}" />
        </f:metadata>  

        <p:growl id="messages" showDetail="true" />

        <h:form>
            <p:panelGrid id="panel" columns="2" styleClass="ui-noborder" columnClasses="rightalign,leftalign">                      
                <p:outputLabel for="databaseName" value="Database name:" />
                <p:inputText id="databaseName" required="true" value="#{userDatabase.name}" />
                <p:outputLabel for="databaseFile" value="File:" />
                <p:fileUpload id="databaseFile" required="true" fileLimit="1" update="file messages" fileUploadListener="#{dataController.handleFileUpload}" mode="advanced" dragDropSupport="true" sizeLimit="1000000000" uploadLabel="Upload" cancelLabel="Delete" allowTypes="/(\.|\/)(txt|binetflow)$/" />              
                <h:panelGroup />
                <h:outputText id="fileDescription" value="#{dataController.fileName}" />                        
                <p:commandButton id="buttonSend" value="Send" update="messages" action="#{dataController.send()}" />                        
            </p:panelGrid>

            <p:blockUI block="page" trigger="buttonSend">
                Sending of the data...              
            </p:blockUI>            

        </h:form>

    </h:body>   
</html>

This is a CDI bean:

package com.system.controller;

import java.io.Serializable;
import java.util.logging.Logger;

import javax.enterprise.context.RequestScoped;
import javax.enterprise.inject.Produces;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.view.ViewScoped;
import javax.inject.Inject;
import javax.inject.Named;

import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;

import com.system.model.UserDatabase;
import com.system.service.DataService;

@Named
@ViewScoped
public class DataController implements Serializable {

    private static final long serialVersionUID = 1383572529241805730L;

    public void handleFileUpload(FileUploadEvent event){
        uploadFile=event.getFile(); 

        FacesMessage message = new FacesMessage("Successful", event.getFile().getFileName() + " is uploaded.");
        FacesContext.getCurrentInstance().addMessage(null, message);        
    }

    public String getFileName(){

        if(uploadFile==null) return "";
        else return uploadFile.getFileName();               
    }

    public void send(){

        if(uploadFile==null){

            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "The file isn't uploaded", "You should upload a file"));
        }
        else{

            //Sending the data to the database... (tha page should be blocked)

            try {
                Thread.sleep(5000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }

            //After successful of sending the data, the page should be unlocked.

            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "The data has been added.", ""));           
        }
    }

    @Named
    @Produces
    @RequestScoped
    private UserDatabase userDatabase=new UserDatabase();  

    @Inject
    private DataService dataService;

    @Inject
    private Logger log;

    private UploadedFile uploadFile;
}

Of course the above code it works but the page is blocked every time when I push the button (even if the fields aren't filled in). I think I should use a widgetVar istead of a trigger in a p:blockUI component but I don't know how and maybe I'm wrong. The best way for me would be if I could block/unlock the page from the send method in the CDI bean but I don't know if it's possible and apart from that - this isn't necessary. Each way will be helpful for me.

Solution

Finally I found the solution. These are steps which I did:

I used the widgetVar attribute istead of the trigger in the blockUI component:

<p:blockUI block="page" widgetVar="widgetBlock">
    Sending of the data...          
</p:blockUI>

I created my own validation method in the DataController bean:

public boolean isValidation(){

    if(uploadFile==null || userTable.getName()==null || userTable.getName().trim().equals("")) return false;
    else return true;
}

I added the onstart (where I call to my validation method and I block the page if I get true) and the oncomplete (where I unlock the page) attributes for the commandButton:

<p:commandButton id="buttonSend" value="Send" action="#{dataController.send()}" update="messages" 
                 onstart="if(#{dataController.validation}){PF('widgetBlock').show()}" 
                 oncomplete="PF('widgetBlock').hide()" />

I put commandButton id to the update attribute in the fileupload component. Apart from that I deleted the require attribute from the fileupload:

<p:fileUpload id="file" 
              fileLimit="1"
              update="buttonSend fileDescription messages" 
              fileUploadListener="#{dataController.handleFileUpload}" 
              mode="advanced" dragDropSupport="true" sizeLimit="1000000000" 
              uploadLabel="Upload" cancelLabel="Delete" allowTypes="/(\.|\/)(txt|binetflow)$/" />               
<h:panelGroup />

I deleted the require attribute from inputtext component as well and added the <p:ajax> tag (I deleted this attribute because the <p:ajax> tag wouldn't work with this attribute like I want, look at my post here):
```
<p:inputText  id="tableName" value="#{userTable.name}" >
    <p:ajax event="keyup" update="buttonSend" />                    
</p:inputText>
```

At the end I moved the validation of the fields from the xhtml page to my send method in DataController bean:

public void send(){             

    boolean validation=true;

    if(userTable.getName()==null || userTable.getName().trim().equals("")){

        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "The name field isn't filled", "You should fill this field"));

        validation=false;
    }

    if(uploadFile==null){

        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "The file isn't uploaded", "You should upload a file"));

        validation=false;
    }       

    if(validation){

        //Sending the data to the database... (tha page is blocked)

        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }

        //After successful of sending the data, the page is unlocked.

        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "The data has been added.", ""));           
    }
}