Как я могу исправить следующую проблему jQuery Validate в Umbraco? - PullRequest
Новая
       9

Как я могу исправить следующую проблему jQuery Validate в Umbraco?

0 голосов
/ 11 октября 2019

Я использую Umbraco CMS для загрузки файла jQuery, который использует плагин jQuery Validate. Код, кажется, отлично работает на моей локальной машине, но не в Umbraco. Форма не проверяется, сам jQuery загружается и работает нормально, так как я проверял это с помощью window.alert ();вызов. Хотя, говоря это, оператор if не работает в CMS, но работает на моем локальном компьютере.

Так что это прекрасно работает на моем локальном компьютере, но не в Umbraco: 

var wheelchairOptions = $("#wheelchair-options");
wheelchairOptions.hide();

$('#00N25000002TSTd').click(function(){
            if($(this).prop("checked") === true){
                wheelchairOptions.show();
        alert("working");
            }
            else if($(this).prop("checked") === false){
                wheelchairOptions.hide();
            }
        });

Из-за того, как Umbraco загружается в коде, это не просто копирование и вставка. Вот как выглядит код в Umbraco: 

<!DOCTYPE html>
<html>
<head>

<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8" />
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"  async defer></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.min.js"></script>


<script type="text/javascript">

      var verifyCallback = function(response) {
        //alert(response);
//$('#re_button').show();
$('#re_button').prop("disabled", false);
      };
      var onloadCallback = function() {
        grecaptcha.render('example3', {
          'sitekey' : '6LdmNKkUAAAAANgIH_Z_IJCstpLT4BaLqc76CTKn',
          'callback' : verifyCallback,
          'theme' : 'light'
        });
      };

        $("#nx-form").validate({
          rules: {
            name: {
              required: true,
              lettersonly: true,
              minlength: 2,
              maxlength: 80,
              normalizer: function( value ) {
                return $.trim( value );
              }
            },
            email: {
              required: true,
              email: true,
              minlength: 2,
              maxlength: 80
            },
            phone: {
              required: true,
              phoneUK: true,
              minlength: 2,
              maxlength: 40
            },
            subject: {
              required: true,
              minlength: 2,
              maxlength: 40
            },
            "00N25000002TSEr": {
              required: true,
              minlength: 2,
              maxlength: 255
            },
            "00N25000002TSFu": {
              required: true,
              lettersonly: true,
              minlength: 2,
              maxlength: 255
            },
            "00N25000002TSGJ": {
              required: true,
              lettersonly: true,
              minlength: 2,
              maxlength: 255
            },
            "00N25000002TSJ3": {
              required: true,
              time: true
            },
            "00N25000002TSJD": {
              required: true,
              dateISO: true
            },
            "00N25000002TSTd": {
              required: true
            }

          }
        });


    // Tests to see if name field contains letters only
    $.validator.addMethod( "lettersonly", function( value, element ) {
        return this.optional( element ) || /^[a-z\s ,.'-]+$/i.test( value ); }, "Letters only please" );


    // Tests to see if tel field contains numbers only
    $.validator.addMethod( "phoneUK", function( phone_number, element ) {
    phone_number = phone_number.replace( /\(|\)|\s+|-/g, "" );
    return this.optional( element ) || phone_number.length > 9 &&
        phone_number.match( /^(?:(?:(?:00\s?|\+)44\s?)|(?:\(?0))(?:\d{2}\)?\s?\d{4}\s?\d{4}|\d{3}\)?\s?\d{3}\s?\d{3,4}|\d{4}\)?\s?(?:\d{5}|\d{3}\s?\d{3})|\d{5}\)?\s?\d{4,5})$/ );
}, "Please specify a valid phone number" );


    // Tests to see if departure fields contain correct time format
$.validator.addMethod( "time", function( value, element ) {
    return this.optional( element ) || /^([01]\d|2[0-3]|[0-9])(:[0-5]\d){1,2}$/.test( value );
}, "Please enter a valid time in the format HH:MM, between 00:00 and 23:59. For e.g. 16:30" );


var wheelchairOptions = $("#wheelchair-options");
wheelchairOptions.hide();

$('#00N25000002TSTd').click(function(){
            if($(this).prop("checked") === true){
                wheelchairOptions.show();
            }
            else if($(this).prop("checked") === false){
                wheelchairOptions.hide();
            }
        });

    </script>


</head>

<body>

<form action="https://national-express--bgdev.my.salesforce.com/servlet/servlet.WebToCase?encoding=UTF-8" method="POST" id="nx-form" name="nx-form"  class="nx-form">
  <input type="hidden" name="orgid" value="00D2500000090xE" />

  <input type="hidden" name="retURL" value="http://www.google.com" />

  <input type="hidden" id="recordType" name="recordType" value="01225000000En7U" />


  <!--  ----------------------------------------------------------------------  --> 
  <!--  NOTE: These fields are optional debugging elements. Please uncomment    --> 
  <!--  these lines if you wish to test in debug mode.                          --> 
  <!--  <input type="hidden" name="debug" value=1>                              --> 
  <!--  <input type="hidden" name="debugEmail"                                  --> 
  <!--  value="mikebackhouse@brightgen.com">                                    --> 
  <!--  ----------------------------------------------------------------------  -->

        <div class="col-sm-12 form_spacing" style="font-weight: bold; font-size: 0.85em">* Required field</div>
        <div class="col-sm-12 form_spacing">
            <div class="col-sm-4"><label for="name">Contact Name</label></div>
            <div class="col-sm-8">
                <input class="form-control nx-form-control" id="name" maxlength="80" name="name" size="20" type="text" />
            </div>
        </div>

        <div class="col-sm-12 form_spacing">
            <div class="col-sm-4"><label for="email">Email</label></div>
            <div class="col-sm-8"><input class="form-control nx-form-control" id="email" name="email" type="email" /></div>
        </div>

        <div class="col-sm-12 form_spacing">
            <div class="col-sm-4"><label for="phone">Phone</label></div>
            <div class="col-sm-8"><input class="form-control nx-form-control" id="phone" name="phone" type="tel" /></div>
        </div>


        <div class="col-sm-12 form_spacing">
            <div class="col-sm-4"><label for="subject">Subject</label></div>
            <div class="col-sm-8"><input  id="subject" class="form-control nx-form-control" maxlength="80" name="subject" size="20" type="text" /></div>
        </div>

        <div class="col-sm-12 form_spacing">
            <div class="col-sm-4"><label for="00N25000002TSEr">Ticket Number:</label></div>
            <div class="col-sm-8"><input  id="00N25000002TSEr" class="form-control nx-form-control" maxlength="255" name="00N25000002TSEr" size="20" type="text" /></div>
        </div>


        <div class="col-sm-12 form_spacing">
            <div class="col-sm-4"><label for="00N25000002TSFu">Travelling From:</label></div>
            <div class="col-sm-8"><input  id="00N25000002TSFu" class="form-control nx-form-control" maxlength="255" name="00N25000002TSFu" size="20" type="text" /></div>
        </div>

        <div class="col-sm-12 form_spacing">
            <div class="col-sm-4"><label for="00N25000002TSGJ">Travelling To:</label></div>
            <div class="col-sm-8"><input  id="00N25000002TSGJ" class="form-control nx-form-control" maxlength="255" name="00N25000002TSGJ" size="20" type="text" /></div>
        </div>

        <div class="col-sm-12 form_spacing">
            <div class="col-sm-4"><label for="00N25000002TSJ3">Departure Time:</label><span class="timeContainer"></div>
            <div class="col-sm-8"><input id="00N25000002TSJ3" class="form-control nx-form-control" name="00N25000002TSJ3" placeholder="HH:MM" size="12" type="text" /></div>
             </span>
        </div>

        <div class="col-sm-12 form_spacing">
            <div class="col-sm-4"><label for="00N25000002TSJD">Date of Travel:</label><span class="dateInput dateOnlyInput"></div>
            <div class="col-sm-8"><input id="00N25000002TSJD" class="form-control nx-form-control" name="00N25000002TSJD" size="12" type="text" placeholder="DD/MM/YY" /></div>
             </span>
        </div>

        <div class="col-sm-12 form_spacing">
            <div class="col-sm-4"><label for="00N25000002TSTd">Travel with Wheelchair?:</label></div>
            <div class="col-sm-8"><input  id="00N25000002TSTd" name="00N25000002TSTd" type="checkbox" value="1" /></div>
             </span>
        </div>

        <div id="wheelchair-options">
            <div class="col-sm-12 form_spacing">
            <div class="col-sm-4"><label for="00N25000002TSTx">Wheelchair Make</label></div>
            <div class="col-sm-8"><input class="form-control nx-form-control"  id="00N25000002TSTx" maxlength="255" name="00N25000002TSTx" size="20" type="text"/></div>
             </span>
        </div>

        <div class="col-sm-12 form_spacing">
            <div class="col-sm-4"><label for="00N25000002TSU7">Wheelchair Model</label></div>
            <div class="col-sm-8"><input class="form-control nx-form-control"  id="00N25000002TSU7" maxlength="255" name="00N25000002TSU7" size="20" type="text"/></div>
             </span>
        </div>      
        </div>

        <div class="col-sm-12 form_spacing">
        <div class="col-sm-4"><label for="00N25000002TSUM">Age of Child 1:</label></div>
        <div class="col-sm-8">
            <select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUM" name="00N25000002TSUM" title="Age of Child 1">
                <option value="">--None--</option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
            </select>
        </div>
        </div>

        <div class="col-sm-12 form_spacing">
        <div class="col-sm-4"><label for="00N25000002TSUR">Age of Child 2:</label></div>
        <div class="col-sm-8">
            <select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUR" name="00N25000002TSUR" title="Age of Child 2">
                <option value="">--None--</option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
            </select>
        </div>
        </div>

        <div class="col-sm-12 form_spacing">
        <div class="col-sm-4"><label for="00N25000002TSUW">Age of Child 3:</label></div>
        <div class="col-sm-8">
            <select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUW" name="00N25000002TSUW" title="Age of Child 3">
                <option value="">--None--</option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
            </select>
        </div>
        </div>

        <div class="col-sm-12 form_spacing">
        <div class="col-sm-4"><label for="00N25000002TSUb">Age of Child 4:</label></div>
        <div class="col-sm-8">
            <select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUb" name="00N25000002TSUb" title="Age of Child 4">
                <option value="">--None--</option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
            </select>
        </div>
        </div>

        <div class="col-sm-12 form_spacing">
        <div class="col-sm-4"><label for="00N25000002TSUg">Age of Child 5:</label></div>
        <div class="col-sm-8">
            <select class="form-control nx-form-control nx-form-dropdown" id="00N25000002TSUg" name="00N25000002TSUg" title="Age of Child 5">
                <option value="">--None--</option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
            </select>
        </div>
        </div>

        <div class="col-sm-12 form_spacing">
            <div class="col-sm-4"><label for="00N25000002TTcp">Customer Entered Summary:</label></div>
            <div class="col-sm-8"><textarea class="form-control nx-form-control text_area" id="00N25000002TTcp" name="00N25000002TTcp" rows="3" type="text" wrap="soft"></textarea></div>
        </div>

<div class="col-sm-12 form_spacing">
        <!--<div class="g-recaptcha" data-sitekey="6LdmNKkUAAAAANgIH_Z_IJCstpLT4BaLqc76CTKn"></div>-->
<div id="example3"></div>
    </div>

        <div class="col-sm-12 form_spacing">
            <button id="re_button"  class="primaryButton primaryButton--blue button_custom" type="submit" disabled="disabled" >Submit Query</button>
        </div>

    </form>

</body>
</html>

Я думаю, что проблема может быть связана с тем, КАК загружается jQuery Validate, я пытался переместить теги jQuery непосредственно перед тегом, но чтобыбезрезультатно.

То, что должно произойти, происходит при изменении, а затем размытие полей ввода форм, должны быть проверены на валидацию с сообщением об ошибке под соответствующим полем ввода.

...