Skip to Content

As mentioned in my previous[ web log | https://www.sdn.sap.com/irj/sdn/weblogs?blog=/pub/wlg/3361], developing web applications can, thanks to the end user, sometimes be difficult. One needs to make a web application that covers all the possible events that might occur. That consists of tasks like input help, repertories, input validation, navigation and of course the saving of the data. But there are also less obvious tasks like foreseeing that a user won’t necessarily follow the supposed way of entering data. That can be something stupid like entering data in the wrong order. Let’s presume that you do a postal code validation based on the value entered. The problem is that the user hasn’t yet provided the country. As a web developer, you need to capture these kind of oddities. Another common issue is that the user enters a value in a field that needs to be checked and immediately clicks on the save button. When that button also triggers the next step in navigation you need to prevent this next step from being executed when the entered value is incorrect. I will show a possible method for dealing with this problem.

Pick  a value

The best method to prevent things is to show a list of possibilities from which the user needs to pick a value. It is safe due the fact that the user can’t type anything wrong, thus no entry validation needs to be done. One needs to keep in mind that this list of possibilities may be dependant upon the values entered in other fields in that form. In the end, you’ll be sure that the chosen value is valid.

Unfortunately, this method can’t be used for all situations and you depend on the user’s input. In this particular situation, we want to check a value to see whether it already exists. Let’s take the hypothetical situation where a user can choose a user name. The situation can occur that user X has the same inspiration as user Y and we want to prevent both users from having the same user id. In a normal situation we can check this easily. There are different solutions possible including working via AJAX. This has been elaborated on in several forum threads already. I wanted to show you a possible method using plain old HTML. Let’s have a step by step look at it.

Step1:  make sure that validation is done whenever the user changes the value







 

Step  2: write the JS validate function

function check_email()
{
document.validvalue_form.a_field_name.value=document.entryform.a_field_name.value;
LOV = open ("empty.htm","validatepopup","location=0,scrollbars=yes,toolbar=no, dependent=yes,screenX=50,screenY=50,height=250,resizable=no,width=250,status=no, menubar=0");
document.validvalue_form.submit();
}

As you can see we do 3 things:

  • copy the value to another form. We don’t want to interfere with the current form. Using another form for validation prevents data housekeeping
  • open a popup. Same reason as with the form. A new window will not interfere with the main screen
  • submit the validation form

 

Step  3: create the validation form



 
 

Nothing special, just that the target of this form is the popup

 

Step 4:  create the OnInputProcessing event

CASE event_id.
  WHEN ‘safe_stuff’
  …
  WHEN 'validate_value'.
    navigation->set_parameter( name = 'a_field_name' value = a_field_name ).
    navigation->goto_page('valid_value.htm' ).

ENDCASE.

 

Make sure that a_field_name is page attribute, set to auto.

 

Step  5: Create the OnInitialisation event of the validation page.

clear not_valid.
CALL FUNCTION 'ZSDN_CHECK_VALID_VALUE_FM'
  EXPORTING
    some_value         = a_field_name
  EXCEPTIONS
    already_exist = 1
    OTHERS        = 2.
IF sy-subrc <> 0.
  not_valid = 'X'.
ENDIF.

In this function module you check whether that value has already been used. I never put queries directly in a BSP page in order to prevent security problems. This FM can of course be a remote function module if needed in your situation.

Don’t forget to set a_field_name as a auto page attribute. Furthermore define the not_valid attribute.

 

Step 6: Create the ‘layout’ of the popup</p>
          <pre>
   <html>
      <head>
   <title></title>
    <script language=”JavaScript”>
   <%if NOT_VALID eq ‘X’.%>
        opener.document.entryform.a_field_name.value=”;
        alert(“<%=a_field_name%> is already used.”);
   <%endif.%>
    </script>
   </head>
    <body  onLoad=”window.close();”>
   </body>
   </html></pre>
          <p> </p>
          <p>When there  is no warning, the popup will vanish automatically, and most of the time will not  even be noticed. <br>
            When the  value is not valid a dialog box will appear. The popup itself will be closed  after the user confirms the message. The value in the original form will be  cleared. Since that value is obligatory, the form will not be validated and the  user won’t be able to fill in invalid values. </p>
          <p> </p>
          <p>
Step 7: Create a JavaScript function to check  if obligatory values are filled in





First of all provide a button in the original entry form in order that the user can submit. Don’t use a submit, but a normal button. Use the onClick event to trigger the JS function.

function check_obligatory()
{
if (document.entryform.a_field_name.value == ‘’)
{
alert (‘Pls fill in all required fields’);
}
else
{
document.entryform.submit();
}
}

 

Don’t submit <br>
            As you can  see, it isn’t that difficult to integrate a field validation control against  the back end. There is a small problem with this method though. It won’t work  if the user enters a value and pushes the submit immediately after it. The  reason for this is that things are handled asynchronously and thus the submit  won’t wait till the validation is done.<br>
            This can be  fixed easily with the following:</p>
          <p>Replace in  step 7<br>
  </p>
          <pre><input  type=”button” name=”Submit” value=”Submit” onClick=”check_obligatory()”></pre>
          <p><br>
          with </p>
          <pre><input  type=”button” name=”Submit” value=”Submit” onClick=” window.setTimeout(‘  check_obligatory()’,1200);”></pre>
          <p>The  SetTimeout will delay the executing of the check_obligatory with 1200ms, enough  time to let the backend validation do their work.</p>
          <p>It  can be secured even more by using a second variable which the user can’t change  (in normal circumstances). In order to establish, do the following<br>
            Add  In step 1</p>
          <pre><input  type=”hidden” value=”” name=”a_field_name_bis”></pre>
          <p><br>
            Add  an hidden field.</p>
          <p>Change  in step 6</p>
          <pre>
   <script  language=”JavaScript”>
   <%if NOT_VALID eq ‘X’.%>
        opener.document.entryform.a_field_name.value=”;
        opener.document.entryform_bis.a_field_name.value=”;
        alert(“<%=a_field_name%> is already used.”);
   <%else.%>
             opener.document.entryform.a_field_name_bis.value=opener.document.entryform.a_field_name.value;
   <%endif.%>
    </script>
             </pre>
          <p>If  it’s valid, clear the hidden and editable field, otherwise put the value of the  editable field in the hidden field.</p>
          <pre>Change  in step 7:
             </pre>
          <pre>function  check_obligatory()
        {
        if (document.entryform.a_field_name_bis.value == ‘’)
           {
           alert (‘Pls fill  in all required fields’);
           }
        else
          {
          document.entryform.submit();
           }
        }
             </pre>
          <p>Here  you check on the hidden field instead of the editable field.</p>
          <p>
Conclusion

Needless to say this is only one of many possible solutions in order to make sure that users enter the correct value. I hope that this shows you that things don’t need to be made that complicated.

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply