We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 46950
    • 86 Posts
    Thanks, Sottwell, looks like my pattern doesn't see the .js file. I added the alert command you had recommended and I didn't see the message on the screen. It's a kind of surprise for me because, as I've said, the line with the ref looks like
    <script src="assets/validate_form.js"></script>


    and, Nuan88, on the attached screenshot you can see that the real path doesn't include "js/" (or, at least, so it seems to me).
      • 46886
      • 1,154 Posts
      Ok you are right, the path is right there, but the file name is validate-form.js not validate_form.js smiley
        • 46950
        • 86 Posts
        Thank you very much, Nuan88! Now at least email checking works! smiley
          • 46886
          • 1,154 Posts
          Great! Progress feels good! laugh

          So, keep us informed, an extra set of eyes can be very helpful for ALL of us!
            • 3749
            • 24,544 Posts
            We've all made that mistake -- many of us more than once. wink
              Did I help you? Buy me a beer
              Get my Book: MODX:The Official Guide
              MODX info for everyone: http://bobsguides.com/modx.html
              My MODX Extras
              Bob's Guides is now hosted at A2 MODX Hosting
              • 46950
              • 86 Posts
              I'm trying to learn jQuery some more, so I found this example -- http://numberfiveone.com/modx-tutorial-formit-with-jquery-validation#quip-comment-preview-box-qcom and tried to work with it. I can say that on the whole I understand the logic. Nevetheless to understand it completely I tried to change it a bit to see the effects and so I discovered that a big part of the code doesn't work at all (at least, in my case). To make it visible I put in three alerts and only the first and the last one appear on the screen. So, my slightly modified script is here:
              alert ('In validate_form');
              
              function isEmail(emailAddress) {
                  var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
                  return pattern.test(emailAddress);
              };
               
              $(document).ready(function(){ 
              alert('111'); 
                  $("form#contactForm").submit(function() {
                      //When the form is submitted
               alert('222');         
                      var email = $("input#email");
                      var elem = $("form#contactForm").children('fieldset').children('input, textarea');
                      var error,foc;
               
                      //If email is filled in and the function isEmail returns true
                      if(email && !isEmail(email.val())){
                          email.focus();
                          email.prev("label").html("<span>Please Enter A Valid Email Address</span>");
                          error = true;
                      }else{
                          email.prev("label").html("Your Email*");
                      }
               
                      //Loop through each input and textarea
                      elem.each(function(index){
              
                          //Does this have the class "required"?
                          if($(this).hasClass('required')==true){
               
                              //It has the class, is it empty or still have the default value?
                              if(!this.value || this.value == this.defaultValue ) {
                               
                                  //Add the error class for CSS styling
                                  $(this).addClass("error");
               
                                  //Switch the error var to true
                                  error = true; 
               
                                  //If this is the first required element not filled out, save the ID
                                  if(!foc)foc = $(this).attr("id");
                              }else{
                                   
                                  //If this is filled out make sure it doesn't have the error class
                                  $(this).removeClass("error");
                              }
                          }
                      });
               
                      //If error has been switched to true
                      if (error){    
               
                          //Focus on the first required element that hasn't been filled out.
                          if(foc)$('#'+foc).css("color","#000").css("fontStyle","normal").focus();
               
                          //Stop the form from submitting
                          return false;
                  }else{
                          //Clear default values on non required elements before submit continues
                          if(elem.value == this.defaultValue)
                          this.value = "";
                      }
                  }); 
               alert('333');
                  //Remove Default Text On Focus
                  $("input, textarea").focus(function() { 
                      if( this.value == this.defaultValue ) { 
                          this.value = ""; 
                          $(this).css("color","#000").css("fontStyle","normal"); 
                      } 
                  }).blur(function() { 
                      if( !this.value.length ) {               
                          $(this).css("color","#999").css("fontStyle","italic"); 
                          this.value = this.defaultValue; 
                      } 
                  });
               
              });  
              


              And here http://artinox-td.ru/modx/index.php?id=2 you can seecthat only alert('111') and alert('333') (beside others) work, while alert('222') and all code after it and till alert('333') doesn't work at all. I'm deeply confused sad

              PS. Looks like the jQuery code doesn't see contactForm?
              • discuss.answer
                • 46950
                • 86 Posts
                I replaced
                $("form#contactForm").submit(function() {

                with
                $("#submitBtn").click(function() {


                The former variant doesn't work (at least, in my Firefox and Google Chrome).
                  • 46886
                  • 1,154 Posts
                  Hi, for this more detailed question, my suggestion would be to make a new post with a suitable title. It will get more pageviews and that means quicker to find someone who can answer.

                  Unless, you don't have any question at all...not sure but jquery is over my head smiley
                    • 28042 ☆ A M B ☆
                    • 24,524 Posts
                    It really isn't a MODX issue per se. MODX doesn't have anything to do with Javascript at all, that is a function of the browser. So all that is needed to use JQuery or any other Javascript in a MODX-generated page is to have the links and Javascript code added to templates and content as would be done with any HTML document.

                    As far as the functioning of the Javascript, again, this is not a MODX issue. The only thing that could be related to MODX is the necessity of having the generated page output produce what the Javascript is expecting. This may involve customizing a listing snippet's chunk tpl, or making sure that a form has the expected ID attribute or classname.
                      Studying MODX in the desert - http://sottwell.com
                      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                      Join the Slack Community - http://modx.org
                      • 46950
                      • 86 Posts
                      Looks like now it works -- after the replacement (described above). I do know that it's not a MODX issue but I simply was in a kind of dispair that I could not understand why it refused working.