Java Script for validating form

Java Script for validating form

  

Hi all, I know outsystems has predefined validations. But I'm learning about the JavaScript usage and Implementations in Outsystems so I'm trying to implement the validation using JS.


I have added a JS in webscreen properties like,

 function validateForm(Employee_Employee_name) {

var name = document.getElementById(Employee_Employee_name);
if (name == null || name == "") {
     alert("You must enter a name");
        return false;
    }    
}


onclick = "validateForm(' " + Employee_Employee_name.Id + " '); "


it works but it only shows as alert. I wanted to show the error message near the input field. 


SO I tried,


SyntaxEditor Code Snippet

 function validateForm(Employee_Employee_name) {

var name = document.getElementById(Employee_Employee_name);
if (name == null || name == "") {
     document.getElementById(Employee_Employee_name).value = "You must enter a name";
        return false;
    }    
}


But it doesn't work. So please suggest a solution for this.


I also need to know how do I specify the form name in the JS function and get the input field values.


Thanks,

Sathish.D 

Hi Sathish D,


For getting the values from the input fields, Kindly try the jquery method ".val()" in your expression.

Ex: $(InputFieldId).val();


For the validation message, i would suggest that you have to insert an element after the input field, same as on what Outsystems did to its validation message.


If you can provide an OML for that, i can help you


Regards,

Cy

Cy wrote:

Hi Sathish D,


For getting the values from the input fields, Kindly try the jquery method ".val()" in your expression.

Ex: $(InputFieldId).val();


For the validation message, i would suggest that you have to insert an element after the input field, same as on what Outsystems did to its validation message.


If you can provide an OML for that, i can help you


Regards,

Cy

Thanks for your reply Cy. I will try what you said. And I also attach the oml here. If possible help me with that.

Sathish D wrote:

Cy wrote:

Hi Sathish D,


For getting the values from the input fields, Kindly try the jquery method ".val()" in your expression.

Ex: $(InputFieldId).val();


For the validation message, i would suggest that you have to insert an element after the input field, same as on what Outsystems did to its validation message.


If you can provide an OML for that, i can help you


Regards,

Cy

Thanks for your reply Cy. I will try what you said. And I also attach the oml here. If possible help me with that.

Hi Sathish,

There are so many ways to implement the validation using jscript and jQuery. it depends on the process or your interest. 

I've created a validation through the OnChange event on the Address as an example. Kindly check if that suffice your interest.


Regards,

Cy


Cy wrote:

Sathish D wrote:

Cy wrote:

Hi Sathish D,


For getting the values from the input fields, Kindly try the jquery method ".val()" in your expression.

Ex: $(InputFieldId).val();


For the validation message, i would suggest that you have to insert an element after the input field, same as on what Outsystems did to its validation message.


If you can provide an OML for that, i can help you


Regards,

Cy

Thanks for your reply Cy. I will try what you said. And I also attach the oml here. If possible help me with that.

Hi Sathish,

There are so many ways to implement the validation using jscript and jQuery. it depends on the process or your interest. 

I've created a validation through the OnChange event on the Address as an example. Kindly check if that suffice your interest.


Regards,

Cy



Thanks. 


I have two questions.

One --> Whats the best way to validate the form as whole by specifying the form name in JavaScript and what best way to display validation message near the input field.

Two -->  I saw the jQuery you used to validate the field. Its nice. But you specified it in expression. But Can i use the same jQuery on JS properties of the webpage and call it when the save button is clicked?

Sathish D wrote:

Cy wrote:

Sathish D wrote:

Cy wrote:

Hi Sathish D,


For getting the values from the input fields, Kindly try the jquery method ".val()" in your expression.

Ex: $(InputFieldId).val();


For the validation message, i would suggest that you have to insert an element after the input field, same as on what Outsystems did to its validation message.


If you can provide an OML for that, i can help you


Regards,

Cy

Thanks for your reply Cy. I will try what you said. And I also attach the oml here. If possible help me with that.

Hi Sathish,

There are so many ways to implement the validation using jscript and jQuery. it depends on the process or your interest. 

I've created a validation through the OnChange event on the Address as an example. Kindly check if that suffice your interest.


Regards,

Cy



Thanks. 


I have two questions.

One --> Whats the best way to validate the form as whole by specifying the form name in JavaScript and what best way to display validation message near the input field.

Two -->  I saw the jQuery you used to validate the field. Its nice. But you specified it in expression. But Can i use the same jQuery on JS properties of the webpage and call it when the save button is clicked?


I tried as you did. Still  have few problems.

==> I validate the form on submit so even though i get  to show the error message the page loads and empty data gets uploaded in db. I want to stay on the same page if i get errors. How do I do that?


==>  Even after enter some data in the field error message of the field gets assigned to the variable.

 See tha above image. So please help with the code.

Sathish D wrote:

Cy wrote:

Sathish D wrote:

Cy wrote:

Hi Sathish D,


For getting the values from the input fields, Kindly try the jquery method ".val()" in your expression.

Ex: $(InputFieldId).val();


For the validation message, i would suggest that you have to insert an element after the input field, same as on what Outsystems did to its validation message.


If you can provide an OML for that, i can help you


Regards,

Cy

Thanks for your reply Cy. I will try what you said. And I also attach the oml here. If possible help me with that.

Hi Sathish,

There are so many ways to implement the validation using jscript and jQuery. it depends on the process or your interest. 

I've created a validation through the OnChange event on the Address as an example. Kindly check if that suffice your interest.


Regards,

Cy



Thanks. 


I have two questions.

One --> Whats the best way to validate the form as whole by specifying the form name in JavaScript and what best way to display validation message near the input field.

Two -->  I saw the jQuery you used to validate the field. Its nice. But you specified it in expression. But Can i use the same jQuery on JS properties of the webpage and call it when the save button is clicked?

Hi Sathish,

One --> Whats the best way to validate the form as whole by specifying the form name in JavaScript and what best way to display validation message near the input field.

      --  Actually, I haven't done validating forms by the use of external scripts such as javascript and jQuery except when needed or new theme is used like Bootstrap. For me, I would still stick on the Outsystems form Validation method and use some tricks using Javascript or jQuery when customization of CSS etc is needed.


Two -->  I saw the jQuery you used to validate the field. Its nice. But you specified it in expression. But Can i use the same jQuery on JS properties of the webpage and call it when the save button is clicked?

      -- Yes, i created a function for the OnChange. just call the function for each input field. But then, you can encapsulate the function by creating a webblock and add the function there so that you can re-use the function by just drag and drop ng block to the page that you want to use the validation.


Regards,

Cy



Sathish D wrote:

Sathish D wrote:

Cy wrote:

Sathish D wrote:

Cy wrote:

Hi Sathish D,


For getting the values from the input fields, Kindly try the jquery method ".val()" in your expression.

Ex: $(InputFieldId).val();


For the validation message, i would suggest that you have to insert an element after the input field, same as on what Outsystems did to its validation message.


If you can provide an OML for that, i can help you


Regards,

Cy

Thanks for your reply Cy. I will try what you said. And I also attach the oml here. If possible help me with that.

Hi Sathish,

There are so many ways to implement the validation using jscript and jQuery. it depends on the process or your interest. 

I've created a validation through the OnChange event on the Address as an example. Kindly check if that suffice your interest.


Regards,

Cy



Thanks. 


I have two questions.

One --> Whats the best way to validate the form as whole by specifying the form name in JavaScript and what best way to display validation message near the input field.

Two -->  I saw the jQuery you used to validate the field. Its nice. But you specified it in expression. But Can i use the same jQuery on JS properties of the webpage and call it when the save button is clicked?


I tried as you did. Still  have few problems.

==> I validate the form on submit so even though i get  to show the error message the page loads and empty data gets uploaded in db. I want to stay on the same page if i get errors. How do I do that?


==>  Even after enter some data in the field error message of the field gets assigned to the variable.

 See tha above image. So please help with the code.

Hi Sathish,

I already checked the code. You put the function on the Onclick() property of the button "Save". Yes, the validation will run but then it will proceed on the process of saving the record. The other way around is that on the function i created, add the method of checking if all the fields that are required meet the requirements and enable/disable the "save" button based on the result of checking of the input fields. You have to put the function back to the onchange() per input field.


Cy wrote:

Sathish D wrote:

Sathish D wrote:

Cy wrote:

Sathish D wrote:

Cy wrote:

Hi Sathish D,


For getting the values from the input fields, Kindly try the jquery method ".val()" in your expression.

Ex: $(InputFieldId).val();


For the validation message, i would suggest that you have to insert an element after the input field, same as on what Outsystems did to its validation message.


If you can provide an OML for that, i can help you


Regards,

Cy

Thanks for your reply Cy. I will try what you said. And I also attach the oml here. If possible help me with that.

Hi Sathish,

There are so many ways to implement the validation using jscript and jQuery. it depends on the process or your interest. 

I've created a validation through the OnChange event on the Address as an example. Kindly check if that suffice your interest.


Regards,

Cy



Thanks. 


I have two questions.

One --> Whats the best way to validate the form as whole by specifying the form name in JavaScript and what best way to display validation message near the input field.

Two -->  I saw the jQuery you used to validate the field. Its nice. But you specified it in expression. But Can i use the same jQuery on JS properties of the webpage and call it when the save button is clicked?


I tried as you did. Still  have few problems.

==> I validate the form on submit so even though i get  to show the error message the page loads and empty data gets uploaded in db. I want to stay on the same page if i get errors. How do I do that?


==>  Even after enter some data in the field error message of the field gets assigned to the variable.

 See tha above image. So please help with the code.

Hi Sathish,

I already checked the code. You put the function on the Onclick() property of the button "Save". Yes, the validation will run but then it will proceed on the process of saving the record. The other way around is that on the function i created, add the method of checking if all the fields that are required meet the requirements and enable/disable the "save" button based on the result of checking of the input fields. You have to put the function back to the onchange() per input field.


Okay How do I remove the validation message?


SyntaxEditor Code Snippet

 if($('#"+Employee_Address.Id+":text').val() == '') // this is to check if the Input field is empty or not
            {
                  
  $('#"+Employee_Address.Id+"').after('<span style=""background: tomato; color: white; border: 1px solid red; padding: 3px;font-weight: bold;"">Please enter the address.</span>') ; // this will change the current value of the input field    
 
 $('#"+Employee_Address.Id+":text').css('border-color', 'red');


                    
}
      else
            {
                   
                  $('#"+Employee_Address.Id+"').css( 'border-color', 'gray' ); // this will change the color of input field
            
                 $('#"+EmployeeForm.Id+":text').reset();
}

I used this but doesn't work.  How do I clear the validation message once i filled the field.