Input email неправильно проходит проверку JS Jquery

205
05 ноября 2021, 02:50

Написал проверку для input-ов на наличие хотя бы 1-ого символа для того чтобы удалить атрибут disabled с кнопки отправки. В условии так же указал если input email содержит @ + (другие условия), то атрибут disabled удаляется. Но input email неправильно проверяет. Он берёт следующие условия и удаляет атрибут disabled. Не понимаю как исправить :( Вот код формы:

<script type="text/javascript">var submitted=false;</script>
            <iframe src="" frameborder="0" name="myframe" style="display: none"></iframe>
            <form action="https://docs.google.com/forms/d/e/1FAIpQLSeGgLP2Wk53csMLm3qGJWqVBWHSSa7X810_aDjPRdyJq97uUw/formResponse" target="myframe" method="POST" id="mG61Hd">
                <div class="freebirdFormviewerViewFormCard exportFormCard">
                    <div class="freebirdFormviewerViewAccentBanner freebirdAccentBackground"></div>
                    <div class="freebirdFormviewerViewFormContent">
                        <div class="freebirdFormviewerViewNoPadding">
                            <div class="freebirdFormviewerViewHeaderHeader exportHeader">
                                <div class="freebirdFormviewerViewHeaderTitleRow">
                                    <div class="freebirdFormviewerViewHeaderTitle exportFormTitle freebirdCustomFont" dir="auto" role="heading" aria-level="1"></div>
                                </div>
                                <div jsname="F0H8Yc" class="freebirdCommonViewSecurequizSecureQuizBannerContainer"></div>
                                <div class="freebirdFormviewerViewHeaderRequiredLegend" aria-hidden="true" dir="auto"></div>
                            </div>
                        </div>
                        <div class="freebirdFormviewerViewItemList" role="list">
                            <div class="freebirdFormviewerViewNumberedItemContainer">
                                <div role="listitem" class="freebirdFormviewerViewItemsItemItem freebirdFormviewerViewItemsTextTextItem" jsname="ibnC6b" jscontroller="rDGJeb" jsaction="sPvj8e:e4JwSe,Dlbleb;O22p3e:e4JwSe,F0zejc;" data-required="true" data-item-id="525540235">
                                    <div class="freebirdFormviewerViewItemsItemItemHeader">
                                        <div class="freebirdFormviewerViewItemsItemItemTitleDescContainer">
                                            <div class="freebirdFormviewerViewItemsItemItemTitleContainer">
                                                <div class="freebirdFormviewerViewItemsItemItemTitle exportItemTitle freebirdCustomFont" dir="auto" role="heading" aria-level="3" aria-describedby="i.desc.525540235 i3"><p class="pt-2">ФИО<span class="freebirdFormviewerViewItemsItemRequiredAsterisk" aria-label="Сделать этот вопрос обязательным">*</span></p> </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="freebirdFormviewerViewItemsTextItemWrapper">
                                        <div class="quantumWizTextinputPaperinputEl freebirdFormviewerViewItemsTextShortText freebirdThemedInput modeLight" jscontroller="pxq3x" jsaction="clickonly:KjsqPd; focus:Jt1EX; blur:fpfTEe; input:Lg5SV" jsshadow="" jsname="W85ice">
                                            <div class="quantumWizTextinputPaperinputMainContent exportContent">
                                                <div class="quantumWizTextinputPaperinputContentArea exportContentArea">
                                                    <div class="quantumWizTextinputPaperinputInputArea">
                                                        <input type="text" class="quantumWizTextinputPaperinputInput exportInput w-100" jsname="YPqjbf" autocomplete="on" tabindex="0" aria-label="ФИО" aria-describedby="i.desc.525540235 i.err.525540235" name="entry.827841273" value="" required="" dir="auto" data-initial-dir="auto" data-initial-value="" placeholder="ФИО" id="email" onkeyup="checkParams();">
                                                        <div jsname="LwH6nd" class="quantumWizTextinputPaperinputPlaceholder exportLabel"></div>
                                                    </div>
                                                    <div class="quantumWizTextinputPaperinputUnderline exportUnderline"></div>
                                                    <div jsname="XmnwAc" class="quantumWizTextinputPaperinputFocusUnderline exportFocusUnderline"></div>
                                                </div>
                                            </div>
                                            <div class="quantumWizTextinputPaperinputCounterErrorHolder">
                                                <div jsname="ty6ygf" class="quantumWizTextinputPaperinputHint exportHint"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div jsname="XbIQze" class="freebirdFormviewerViewItemsItemErrorMessage" id="i.err.525540235" role="alert"></div>
                                </div>
                            </div>
                            <div class="freebirdFormviewerViewNumberedItemContainer">
                                <div role="listitem" class="freebirdFormviewerViewItemsItemItem freebirdFormviewerViewItemsTextTextItem" jsname="ibnC6b" jscontroller="rDGJeb" jsaction="sPvj8e:e4JwSe,Dlbleb;O22p3e:e4JwSe,F0zejc;" data-required="true" data-item-id="1740872698">
                                    <div class="freebirdFormviewerViewItemsItemItemHeader">
                                        <div class="freebirdFormviewerViewItemsItemItemTitleDescContainer">
                                            <div class="freebirdFormviewerViewItemsItemItemTitleContainer">
                                                <div class="freebirdFormviewerViewItemsItemItemTitle exportItemTitle freebirdCustomFont" dir="auto" role="heading" aria-level="3" aria-describedby="i.desc.1740872698 i6"><p class="pt-2">Email<span class="freebirdFormviewerViewItemsItemRequiredAsterisk" aria-label="Сделать этот вопрос обязательным">*</span></p></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="freebirdFormviewerViewItemsTextItemWrapper">
                                        <div class="quantumWizTextinputPaperinputEl freebirdFormviewerViewItemsTextShortText freebirdFormviewerViewItemsTextEmail freebirdThemedInput modeLight" jscontroller="pxq3x" jsaction="clickonly:KjsqPd; focus:Jt1EX; blur:fpfTEe; input:Lg5SV" jsshadow="" jsname="W85ice">
                                            <div class="quantumWizTextinputPaperinputMainContent exportContent">
                                                <div class="quantumWizTextinputPaperinputContentArea exportContentArea">
                                                    <div class="quantumWizTextinputPaperinputInputArea">
                                                        <input type="email" class="quantumWizTextinputPaperinputInput exportInput w-100" jsname="YPqjbf" autocomplete="on" tabindex="0" aria-label="Email" aria-describedby="i.desc.1740872698 i.err.1740872698" name="entry.1019405383" value="" required="" dir="auto" data-initial-dir="auto" data-initial-value="" placeholder="Email" id="name" onkeyup="checkParams();">
                                                        <div jsname="LwH6nd" class="quantumWizTextinputPaperinputPlaceholder exportLabel"></div>
                                                    </div>
                                                    <div class="quantumWizTextinputPaperinputUnderline exportUnderline"></div>
                                                    <div jsname="XmnwAc" class="quantumWizTextinputPaperinputFocusUnderline exportFocusUnderline"></div>
                                                </div>
                                            </div>
                                            <div class="quantumWizTextinputPaperinputCounterErrorHolder">
                                                <div jsname="ty6ygf" class="quantumWizTextinputPaperinputHint exportHint"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div jsname="XbIQze" class="freebirdFormviewerViewItemsItemErrorMessage" id="i.err.1740872698" role="alert"></div>
                                </div>
                            </div>
                            <div class="freebirdFormviewerViewNumberedItemContainer">
                                <div role="listitem" class="freebirdFormviewerViewItemsItemItem freebirdFormviewerViewItemsTextTextItem" jsname="ibnC6b" jscontroller="rDGJeb" jsaction="sPvj8e:e4JwSe,Dlbleb;O22p3e:e4JwSe,F0zejc;" data-required="true" data-item-id="281467744">
                                    <div class="freebirdFormviewerViewItemsItemItemHeader">
                                        <div class="freebirdFormviewerViewItemsItemItemTitleDescContainer">
                                            <div class="freebirdFormviewerViewItemsItemItemTitleContainer">
                                                <div class="freebirdFormviewerViewItemsItemItemTitle exportItemTitle freebirdCustomFont" dir="auto" role="heading" aria-level="3" aria-describedby="i.desc.281467744 i9"><p class="pt-2">Ваше сообщение<span class="freebirdFormviewerViewItemsItemRequiredAsterisk" aria-label="Сделать этот вопрос обязательным">*</span></p></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="quantumWizTextinputPapertextareaEl modeLight freebirdFormviewerViewItemsTextLongText freebirdThemedInput" jscontroller="pxq3x" jsaction="clickonly:KjsqPd; focus:Jt1EX; blur:fpfTEe; input:Lg5SV" jsshadow="" jsname="W85ice">
                                        <div class="quantumWizTextinputPapertextareaMainContent exportContent">
                                            <div class="quantumWizTextinputPapertextareaPlaceholder exportLabel" jsname="LwH6nd"></div>
                                            <div class="quantumWizTextinputPapertextareaContentArea exportContentArea">
                                                <textarea class="quantumWizTextinputPapertextareaInput exportTextarea w-100" jsname="YPqjbf" data-rows="1" tabindex="0" aria-label="Ваше сообщение" jscontroller="gZjhIf" jsaction="input:Lg5SV;ti6hGc:XMgOHc;rcuQ6b:WYd;" required="" name="entry.701869620" dir="auto" data-initial-dir="auto" data-initial-value="" aria-describedby="i.desc.281467744 i.err.281467744" rows="5" placeholder="Напишите здесь своё сообщение" id="text" onkeyup="checkParams();"></textarea>
                                            </div>
                                            <div class="quantumWizTextinputPapertextareaUnderline exportUnderline"></div>
                                            <div jsname="XmnwAc" class="quantumWizTextinputPapertextareaFocusUnderline exportFocusUnderline"></div>
                                        </div>
                                        <div class="quantumWizTextinputPapertextareaCounterErrorHolder">
                                            <div jsname="ty6ygf" class="quantumWizTextinputPapertextareaHint exportHint"></div>
                                        </div>
                                    </div>
                                    <div jsname="XbIQze" class="freebirdFormviewerViewItemsItemErrorMessage" id="i.err.281467744" role="alert"></div>
                                </div>
                            </div>
                        </div>
                        <div class="freebirdFormviewerViewNavigationNavControls" jscontroller="lSvzH" jsaction="rcuQ6b:npT2md;JIbuQc:Gl574d(QR6bsb),V3upec(GeGHKb),HiUbje(M2UYVd),NPBnCf(OCpkoe);" data-shuffle-seed="4131401141129893989" data-should-execute-invisible-captcha-challenge="false" data-is-receipt-checked="false">
                            <div class="freebirdFormviewerViewNavigationButtonsAndProgress">
                                <div class="freebirdFormviewerViewNavigationButtons">
                                    <div role="button" class="quantumWizButtonEl quantumWizButtonPaperbuttonEl quantumWizButtonPaperbuttonFlat quantumWizButtonPaperbuttonDark quantumWizButtonPaperbutton2El2 freebirdFormviewerViewNavigationSubmitButton" jscontroller="VXdfxd" jsaction="click:cOuCgd; mousedown:UX7yZ; mouseup:lbsD7e; mouseenter:tfO1Yc; mouseleave:JywGue; focus:AHmuwe; blur:O22p3e; contextmenu:mg9Pef;touchstart:p6p2H; touchmove:FwuNnf; touchend:yfqBxc(preventMouseEvents=true|preventDefault=true); touchcancel:JMtRjd;" jsshadow="" jsname="M2UYVd" aria-disabled="false" tabindex="0">
                                        <div class="quantumWizButtonPaperbuttonRipple exportInk" jsname="ksKsZd"></div>
                                        <div class="quantumWizButtonPaperbuttonFocusOverlay exportOverlay"></div><span jsslot="" class="quantumWizButtonPaperbuttonContent"><span class="quantumWizButtonPaperbuttonLabel exportLabel"><input type="submit" id="submit" onclick="hideshow();" value="Отправить" class="btn btn-danger mt-3" disabled /></span></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="fvv" value="1">
                        <input type="hidden" name="draftResponse" value="[null,null,&quot;4131401141129893989&quot;]">
                        <input type="hidden" name="pageHistory" value="0">
                        <input type="hidden" name="fbzx" value="4131401141129893989">
                    </div>
                </div>
            </form>

А это скрипт выполняющий проверку через вызов функции checkParams();

function checkParams() {
    var name = $('#name').val();
    var email = $('#email').val();
    var text = $('#text').val();
        if(email.indexOf('@') == true && name.length != 0 && str.length != 0 && text.length != 0) {
            $('#submit').removeAttr('disabled');
        } else {
            $('#submit').attr('disabled', 'disabled');
        }
    }
Answer 1

А по какому событию Вы проверяете корректность заполнения полей? Вот Вам пример с Вашей функцией, где проверка осуществляется по keyup (только indexOf лучше сравнивать с -1):

function checkParams() { 
    var name = $('#name').val(); 
    var email = $('#email').val(); 
    var text = $('#text').val(); 
 
    if(email.indexOf('@') != -1 && name.length != 0 && text.length != 0) { 
    $('#submit').removeAttr('disabled'); 
  } else { 
    $('#submit').attr('disabled', 'disabled'); 
  } 
} 
 
$('input').keyup(function(){ 
    checkParams(); 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<form> 
  <input type="text" id="name" placeholder="введите имя" /><br /> 
  <input type="email" id="email" placeholder="введите email" /><br /> 
  <input type="text" id="text" placeholder="введите комментарий" /><br /> 
  <input type="submit" id="submit" value="отправить" disabled="" /> 
</form>

Answer 2

Решение на es6

 document.querySelector('form').addEventListener('input', e => {
      // находим форму и добавляем слушатель на событие onInput
  const submitButton = e.currentTarget.querySelector('input[type=submit]'); // находим кнопку submit
  const totalLength = [...e.currentTarget.elements].reduce((reducer, element) => {
    // берем все элементы формы и перебираем их с помощью метода reduce что бы посчитать общую длину букв во всех элементах формы
    const { type, value } = element;
    const typeEmail = type === 'email';
    if (typeEmail && value.length && !value.includes('@')) {
      // делаем проверку если тип поля эмейл и в этом поле есть буквы но нет символа @ то обрываем итерацию в методе reduce
      return;
    }
    if (type === 'text' || typeEmail || type === 'textarea') {
      // если в форме такие тпы элементов то считаем длину содеражщих символов
      reducer += value.length;
    }
    return reducer; // возвращаем посчитанное количество символов
  }, 0); // здесь на выходе получаем длину всех символов в форме
  if (totalLength) {
    // если есть длина то у кнопки сабмит убрать атрибут disabled
    submitButton.removeAttribute('disabled');
  } else {
    // иначе добавить
    submitButton.setAttribute('disabled', '');
  }
});
READ ALSO
метод sort() в JS
javascript

метод sort() в JS

Почему на консоль выводится

 100
Mожете помочь конвертировать этот js код в pascal
javascript

Mожете помочь конвертировать этот js код в pascal

Вы не указали диалект паскаля! Вот решения для паскаля из стандарта ISO 7185:

 347
NodeJS - Поиск файла циклом
javascript

NodeJS - Поиск файла циклом

Возникла проблема, которой в других языках просто не существует, либо я попросту не умею гуглить (да и знания js практически нулевые)Ближе...

 186
Правильно выбранный селектор для .map
javascript

Правильно выбранный селектор для .map

Не вполне понимаю механику селекторов в jsЕсть таблица

 210