1

I have a div which contains a text fields for a name and email address. This div disappears if the validation passes but in case of invalid email address I want to show the message without letting the div to disappear. For name validation I am using JS but for email address I am calling a service.

JSP 

<form name="resendEsignatureFormId" id="resendEsignatureFormId" action="myStruts2Action "method="POST"/>

<div id="Signers" style="display: none;">
        <s:iterator value="intgDetails.custDetails.signers" var="signerslist">
            <div class="sectionHeaderLine"></div>
            <div class="sectionHeader">Signer #<%=ct%></div>

            <div id="display" class="fieldLabelBold" style="color:red"> 
                <c:if test="${emailValidationMessage != null}">
                    <div class="fieldLabelBold" style="color:red">${emailValidationMessage}</div>
                </c:if>
            </div>

            <table width=100%>                                              
                <tr align="left">
                    <td align="left">
                        <s:textfield name="nameId" id="nameId" label="Name" cssClass="dataFieldCell3" value="%{#signerslist.name}" />
                    </td>
                </tr>
                <tr align="left">
                    <td align="left">
                        <s:textfield name="emailId" id="emailId" label="Email" cssClass="dataFieldCell3" value="%{#signerslist.email}" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <s:textfield name="recipientId" id="recipientId" style="display: none;" value="%{#signerslist.recipientId}" />
                    </td>
                </tr>
                <%
                    ct++;
                %>
            </table>
        </s:iterator>

        <table width=100%>
            <tr>
                <td class="esignNavigation">            
                    <a href="#x" onclick ="return validateEmailAddress()"><span>Confirm</span></a>
                    <a href="#x" onclick="hideSigners()"><span>Cancel</span></a>
                </td>
            </tr>
        </table>
    </div>

JS

function showSigners() {
    $(Signers).show();
}

function hideSigners() {
    if (true == $(Signers).is(':visible')) {
        $(Signers).hide();
    }
} 

function validateEmailAddress() {       
    if( document.getElementById( 'nameId' ).value == "" ) {
        document.getElementById( 'display' ).innerHTML ='Please provide name';
        return false;
    }   
    document.getElementById( 'resendEsignatureFormId' ).submit();
}

I thought by checking the variable emailValidationMessage for null condition in the function I could reappear the div tag but it is not working.

function validateEmailAddress() {       
    if( document.getElementById( 'nameId' ).value == "" ) {
        document.getElementById( 'display' ).innerHTML ='Please provide name';
        return false;

    } if( '${emailValidationMessage}' != null ) {
        $(Signers).show();
    }   
    document.getElementById( 'resendEsignatureFormId' ).submit();
}
Mike
  • 777
  • 3
  • 16
  • 41
  • `document.getElementById( 'nameId' ).value == ""`, i think you meant `emailId` here – Ramanlfc Aug 23 '17 at 15:10
  • I am validating the name using JavaScript but for email I am calling a service which is causing the issue. For email address it submits the form. – Mike Aug 23 '17 at 15:12
  • @ Steve, I have removed the java tag. – Mike Aug 23 '17 at 15:14
  • *"but for email address I am calling a service"* where? – Kevin B Aug 23 '17 at 15:41
  • If jsp is filling `${emailValidationMessage}` in, it's not gonna be equal to null even if it is empty or 'null'. – Kevin B Aug 23 '17 at 15:43
  • @Kevin. The form goes to the back end for the email validation. – Mike Aug 23 '17 at 15:49
  • I am populating this ${emailValidationMessage} at the back end and in the JSP I am just checking if it is null or not. In case of not null I am displaying the message and if it null nothing. – Mike Aug 23 '17 at 15:50
  • **it will never be equal to null.** `'' != null; // true` `'null' != null // true`. A string is never equal to null, *regardless* of it's value. – Kevin B Aug 23 '17 at 15:51
  • @ kevin. I am displaying the messages based on this condition and it is working fine. – Mike Aug 23 '17 at 15:53
  • It isn't doing what you think it is. -> https://stackoverflow.com/questions/1812245/what-is-the-best-way-to-test-for-an-empty-string-with-jquery-out-of-the-box/1812266#1812266 It's *always* showing the div. the div being empty just makes you not see it. – Kevin B Aug 23 '17 at 15:54
  • Ohh so you are talking about the JS correct Kevin. – Mike Aug 23 '17 at 15:55
  • The actual problem in your code however is that you're not showing the div until after the email validation client-side begins, shouldn't that be happening up front? Why not just always show the div? if it's empty, it'l be empty. – Kevin B Aug 23 '17 at 15:56
  • I know but this is the requirement and I can't change it. – Mike Aug 23 '17 at 15:57
  • @kevin. Actually the text fields are auto fill. – Mike Aug 23 '17 at 18:02
  • i don't get what that comment has to do with anything. – Kevin B Aug 23 '17 at 18:03
  • You mentioned why not to show the div always, so initially the div is hidden. There is a button which displays it and auto fills the fields. – Mike Aug 23 '17 at 18:09

0 Answers0