MachForm Community Forums » MachForm 4

1. williamansley
   Member

   I am currently swamped with other work, so I would appreciate any help I can get with this. I would like to use the "embed a custom javascript for the form" feature (introduced in Machform 4.2) to do custom verification of a field. I am not very familiar with javascript, but I know how to create the regular expression I need and I know how to identify the actual field names in my form. I would like to verify the contents of a certain field against a regex and, if possible, display a custom error message if the field doesn't verify and, of course, prevent the form from being submitted.

   Has anyone done something similar? If you have, would you be willing to share your code? Thanks in advance!

   Posted 9 years ago #
2. 

   yuniar

   Here is a basic code that checks for a text field (having id = #element_1). This code validate for the text value to match "xyz".
   If the entered text is not "xyz", it will display an alert message and prevent the form from being submitted.

   $(function(){
   
   	//code below will be executed when the submit button being clicked
   	$('form.appnitro').submit(function() {
   
   	  if($("#element_1").val() != "xyz"){
   
   	  	alert("Incorrect text entered!");
   
   	    //restore the submit button
   	    $("#li_buttons > input[type=submit],#li_buttons > input[type=image]").prop("disabled",false);
   
   	    //cancel the form submission
   	    return false;
   	  }
   	});
   });

   if the code above doesn't formatted nicely, you can also check it here:
   http://pastebin.com/wrtDf5Fp

   ---

   MachForm Founder

   Posted 9 years ago #

3. williamansley
   Member

   Yuniar, thank you, this will be a great help.

   Posted 9 years ago #

4. williamansley
   Member

   I struggled with this, since I knew nothing about javascript (now I know a little tiny bit, which is an improvement), and I especially didn't know about anonymous javascript functions, but I got it to work once I realized that the function in the example wasn't supposed to have a name.

   Thanks again, Yuniar!

   Posted 9 years ago #

5. williamansley
   Member

   I now have a new, related question. Is is possible, using the built-in javascript functionality, to tie into Machform's own error notification code? While using a javascript alert function to create a pop-up dialog box is a good deal better than nothing, what I really want to do is to have the appropriate field highlight in red and the error message appear under the field, just as if it was a built-in Machform error notification, I did this in an old version by modifying the Machform code itself, but we decided to no longer do that, since it was a huge maintenance headache.

   Posted 9 years ago #
6. 

   yuniar

   Here is the updated code. I replaced the pop-up dialog box with the red field highlight:

   $(function(){
   
   	//code below will be executed when the submit button being clicked
   	$('form.appnitro').submit(function() {
   
   	  if($("#element_1").val() != "xyz"){
   
   	    $("#element_1").parentsUntil("ul").last().addClass("error").append('<p class="error">Incorrect text entered!</p>');
   
   	    //restore the submit button
   	    $("#li_buttons > input[type=submit],#li_buttons > input[type=image]").prop("disabled",false);
   
   	    //cancel the form submission
   	    return false;
   	  }
   	});
   });

   also available here:
   http://pastebin.com/EfwnLRNd

   ---

   MachForm Founder

   Posted 9 years ago #

7. williamansley
   Member

   Yuniar, thank you very much. This works, although there are still one or two small problems; primarily that if the user makes multiple mistakes entering the data for this field, the error message is duplicated each time the "Submit" button is pressed. I will try to figure this out myself before asking for more help.

   Posted 9 years ago #

8. williamansley
   Member

   Yuniar, I have not been able to figure out how to solve a problem with the "error message state" of fields in a form when using this custom javascript. There are actually two issues.

   The first is that if the user makes repeated errors in the field with the custom javascript, the error message text is duplicated each time the Submit button is pressed. I would like to fix this.

   The more serious issue, at least in my mind, if that if the user makes an error in another required field without any custom javascript and in the field with the custom javascript at the same time, then fixes the issue in the non-custom field, but leaves an error in the custom field, the "error state" of the non-custom field is not cleared when the Submit button is pressed, even though it now contains valid input. I would really like to get this fixed, since it is potentially very confusing, especially in a long complex form such as the one I need this custom validation for.

   Is there any way to make this work? If you need me to clarify the problem description, please let me know.

   Posted 9 years ago #

9. taniamayer
   Member

   I have a similar question. I am assuming if I have a list of of validations, I use a comma?
   if($("#element_1").val() != "xyz,abc,123,456"){

   Please advise.

   Posted 9 years ago #

10. agdm619
    Member

    Is there a way with this code to validate the way the data is entered into the field. We use a field ticket number with this formatting R23-021215-1. Is there a way to make the field make sure it's 3 digits dash 6 digits dash 1 digit?

    Posted 9 years ago #

11. businessschool
    Member

    Hi, I have been working on this function for a while now and would like to know if anyone can see the problem with the below script. There are 2 if statements that have been commented out as I am testing them, the live if statement that tests ONE condition works, that means the value in element_29 is being assigned to the pcode1 variable AND it being converted to uppercase.

    As soon as I introduce the other values, using the || or statement, the script fails. Can anyone see what could be causing this behaviour? Also, when an error is returned the error message is appended to the bottom of element_29 as it should. However, if you submit again and it returns another error, it appends the error message again, multiple error messages. Does anyone have code to CLEAR the error message before the function runs

    Thanks for any assistance

    // Check the promo code and error if incorrect UQSC20, ALUM10 and NFPS10
    $('form.appnitro').submit(function() {
    var pcode1;
    pcode1 = $("#element_29").val().toUpperCase();

    // if(pcode1 != "UQSC20" || pcode1 != "ALUM10" || pcode1 != "NFPS10"){
    if(pcode1 != "ALUM10"){
    $("#element_29").parentsUntil("ul").last().addClass("error").append('<p class="error">Please enter a valid promo code! </p>');
    $("#li_buttons > input[type=submit],#li_buttons > input[type=image]").prop("disabled",false);
    return false;
    }
    }); // end of function

    UPDATE:

    Changed the if statement to the following and it works:

    if(pcode1 !== 'UQSC20' && pcode1 !== 'ALUM10' && pcode1 !== 'NFPS10'){

    Now all that is needed is for the error message to be reset to blank PRIOR to the function running to stop multiple errors

    Posted 8 years ago #

12. businessschool
    Member

    The form also has a radio button component (element_28), Yes No values. The following code DOES NOT get the value that is selected

    $("#element_28 option:selected").text();

    anyone know what the correct syntax is? Thanks much

    Posted 8 years ago #

RSS feed for this topic

Reply

You must log in to post.