Question

when a user presses submit i can not get it to call the JS below, what am i missing

<script type="text/javascript"> 

        function required(){  
            if (document.getElementById("Username").value.length == 0)  
            {   
                alert("message");        
                return false;   
            }       
            return true;   
        }

    </script> 

Code for user to enter username

<h:form> <!--onsubmit="return username_validation();">-->


                <h:outputLabel for="username">Please enter your username: </h:outputLabel>
                <h:inputText id="Username" label="Username" value="#{user.id}"
                             size="20" required="true" requiredMessage="Please enter a username" >
                    <f:ajax event="blur" render="usernameMessage" />
                </h:inputText><br></br><br></br>
                <h:message id="usernameMessage" for="username" />
                To print a piece of text, please press the submit button below to upload the text:<br/><br/>
                <h:commandButton type="Submit" value="Submit" onclick="return username_validation()" action="upload/uploadText" styleClass="submit"/>

            </h:form>

Thanks to the help of you guys i now have the following : However i can never get the error message to go by the side of the h:inputText how can i do this ?

 <h:form> <!--onsubmit="return username_validation();">-->


                    <h:outputLabel for="username">Please enter your username: </h:outputLabel>
                    <h:inputText id="Username" label="Username" value="#{user.id}"
                                 size="20" required="true" requiredMessage="Please enter a username" >

                    </h:inputText><br></br><br></br>

                    To print a piece of text, please press the submit button below to upload the text:<br/><br/>
                    <h:commandButton type="Submit" value="Submit" onclick="return username_validation()" action="upload/uploadText" styleClass="submit"/>

                </h:form>

also this is my userBean, i have added @NotNull but this is not currently working, have i missed something out ?

package com.corejsf;

import java.io.Serializable;
import javax.inject.Named;
import javax.enterprise.context.SessionScoped;
import javax.validation.constraints.NotNull;


@Named("user")
@SessionScoped
public class UserBean implements Serializable {

    @NotNull(message = "Please enter a username")
    private String id;

    public String getId() {
        return id;
    }

    public void setId(String newValue) {
        id = newValue;
    }
    private String fileText;

    public String getFileText() {
        return fileText;
    }

    public void setFileText(String fileText) {
        this.fileText = fileText;
    }
}

Answer 1

Look in the generated HTML source. Rightclick page in browser and do View Source. There exist no element with ID Username in the HTML source at all. Fix that accordingly.

<h:form id="form" ...>
    <h:inputText id="username" ... />
    ...
</h:form>

and

var usernameElement = document.getElementById("form:username");

---

Unrelated to the concrete problem, you’re going in the wrong direction as to performing validation purely by JavaScript. This is unreliable. Just use required="true".

<h:form>
    <h:inputText id="username" ... required="true">
        <f:ajax event="blur" render="usernameMessage" />
    </h:inputText>
    <h:message id="usernameMessage" for="username" />
    ...
</h:form>

See also:

• JSF2 Validation Clientside or Serverside?
• JSF 2.0 tutorial – Finetuning Validation