Вопросы Теги

Сделайте кнопку проверки необходимых атрибутов и функция возвращает true перед отправкой [duplicate]

Используйте цикл while ... 

var i=0, item, items = ['one','two','three'];
while(item = items[i++]){
    console.log(item);
}

logs: «один», «два», «три»

. И для обратного порядка еще более эффективный loop 

var items = ['one','two','three'], i = items.length;
while(i--){
    console.log(items[i]);
}

logs: 'three', 'two', 'one'

Или классический цикл for 

var items = ['one','two','three']
for(var i=0, l = items.length; i < l; i++){
    console.log(items[i]);
}

: «один», «два», «три»

Ссылка: http://www.sitepoint.com/google-closure-how-not-to-write-javascript/

213
задан worldofjr 15 December 2015 в 14:36
поделиться

17 ответов

Чтобы проверить правильность определенного поля, используйте: 

$('#myField')[0].checkValidity(); // returns true/false

. Чтобы проверить, действительна ли форма, используйте: 

$('#myForm')[0].checkValidity(); // returns true/false

Если вы хотите отобразить что некоторые браузеры имеют (например, Chrome), к сожалению, единственный способ сделать это - отправить форму, например: 

var $myForm = $('#myForm');

if(! $myForm[0].checkValidity()) {
  // If the form is invalid, submit it. The form won't actually submit;
  // this will just cause the browser to display the native HTML5 error messages.
  $myForm.find(':submit').click();
}

Надеюсь, это поможет. Имейте в виду, что проверка HTML5 не поддерживается во всех браузерах.

344
ответ дан Daniel Dewhurst 5 September 2018 в 10:34
поделиться

Это довольно простой способ заставить HTML5 выполнить валидацию для любой формы, но при этом имеет современный JS-контроль над формой. Единственное предостережение - кнопка отправки должна находиться внутри <form>.

html 

<form id="newUserForm" name="create">
Email<input type="email" name="username" id="username" size="25" required>
Phone<input type="tel" id="phone" name="phone" pattern="(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}" size="12" maxlength="12" required>
<input id="submit" type="submit" value="Create Account" >
</form>

js 

// bind in ready() function
jQuery( "#submit" ).click( newAcctSubmit );

function newAcctSubmit()
{
  var myForm = jQuery( "#newUserForm" );

  // html 5 is doing the form validation for us,
  // so no need here (but backend will need to still for security)
  if ( ! myForm[0].checkValidity() )
  {
    // bonk! failed to validate, so return true which lets the
    // browser show native validation messages to the user
    return true;
  }

  // post form with jQuery or whatever you want to do with a valid form!
  var formVars = myForm.serialize();
  etc...
}
0
ответ дан Aaron 5 September 2018 в 10:34
поделиться 
<!DOCTYPE html>
<html>

<head>
                <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
                <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
                <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
                <title></title>
                <style>
                                .div{
                                width:100px;
                                height:100px;
                                border:1px solid black;
                                }
                                #div1{
                                width:20px;
                                height:20px;
                                background: red;
                                }
                                #div2{
                                width:20px;
                                height:20px;
                                background: blue;
                                }
                                #div3{
                                width:20px;
                                height:20px;
                                background: black;
                                }
                </style>
                                <script> 
                                var initial="";      
                                function allowDrop(e)
                                {
                                                e.preventDefault();
                                }
                                function drag(e){
                                                e.dataTransfer.setData("div",e.target.id);
                                }
                                function drop(e)
                                {                                              
                                                e.preventDefault();
                                                var data = e.dataTransfer.getData("div");
                                                if(initial=="")
                                                {
                                                initial = $("#"+data);
                                                e.target.appendChild($("#"+data)[0]);
                                                }else{
                                                $("#draghere").append(initial);
                                                e.target.appendChild($("#"+data)[0]);
                                                initial = $("#"+data);
                                                }
                                }
  //                                function drop(e)
  //                               { 
  // e.preventDefault();
  // var data = e.dataTransfer.getData("div");
  // e.target.appendChild($("#"+data)[0]);
  //                                }
                                $(document).ready(function(){

                                });
                </script>
</head>

<body>
                <div class="div" id="draghere" ondragover="allowDrop(event)" ondrop="drop(event)">
                <div class="item" id="div1" draggable="true" ondragstart="drag(event)">
                </div>
        <!--         <div class="item" id="div2" draggable="true" ondragstart="drag(event)">
                </div>
                <div class="item" id="div3" draggable="true" ondragstart="drag(event)">
                </div> -->
                </div>   
                <div class="div" id="draghere1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>  
                <input type="text" name="asfa" id="tt" maxlength="10" onkeypress="return (event.charCode >= 47 && event.charCode <= 57) || event.charCode == 43 || event.charCode == 45" onpaste="return (event.charCode >= 47 && event.charCode <= 57) || event.charCode == 43 || event.charCode == 45">
</body>

</html>
0
ответ дан Anonymous 5 September 2018 в 10:34
поделиться

Это помогло мне отобразить собственные сообщения об ошибках HTML 5 с проверкой формы. 

<button id="btnRegister" class="btn btn-success btn btn-lg" type="submit"> Register </button>



$('#RegForm').on('submit', function () 
{

if (this.checkValidity() == false) 
{

 // if form is not valid show native error messages 

return false;

}
else
{

 // if form is valid , show please wait message and disable the button

 $("#btnRegister").html("<i class='fa fa-spinner fa-spin'></i> Please Wait...");

 $(this).find(':submit').attr('disabled', 'disabled');

}


});

Примечание: RegForm - это form id.

Ссылка

Надежда помогает кому-то.

0
ответ дан Community 5 September 2018 в 10:34
поделиться

Для этого вам не нужен jQuery. В вашей форме добавьте: 

onsubmit="return buttonSubmit(this)

или в JavaScript: 

myform.setAttribute("onsubmit", "return buttonSubmit(this)");

В вашей функции buttonSubmit (или, как вы ее называете), вы можете отправить форму с помощью AJAX , buttonSubmit вызывается только в том случае, если ваша форма проверена в HTML5.

Если это кому-то помогает, вот моя функция buttonSubmit: 

function buttonSubmit(e)
{
    var ajax;
    var formData = new FormData();
    for (i = 0; i < e.elements.length; i++)
    {
        if (e.elements[i].type == "submit")
        {
            if (submitvalue == e.elements[i].value)
            {
                submit = e.elements[i];
                submit.disabled = true;
            }
        }
        else if (e.elements[i].type == "radio")
        {
            if (e.elements[i].checked)
                formData.append(e.elements[i].name, e.elements[i].value);
        }
        else
            formData.append(e.elements[i].name, e.elements[i].value);
    }
    formData.append("javascript", "javascript");
    var action = e.action;
    status = action.split('/').reverse()[0] + "-status";
    ajax = new XMLHttpRequest();
    ajax.addEventListener("load", manageLoad, false);
    ajax.addEventListener("error", manageError, false);
    ajax.open("POST", action);
    ajax.send(formData);
    return false;
}

Некоторые из моих форм содержат несколько кнопок отправки, поэтому эта строка if (submitvalue == e.elements[i].value). Я установил значение submitvalue с помощью события click.

3
ответ дан Dan Bray 5 September 2018 в 10:34
поделиться

Я знаю, что на это уже был дан ответ, но у меня есть другое возможное решение.

Если вы используете jquery, вы можете это сделать.

Сначала создайте пару расширений для jquery, поэтому вы можете повторно использовать их по мере необходимости. 

$.extend({
    bypassDefaultSubmit: function (formName, newSubmitMethod) {
        $('#'+formName).submit(function (event) {
            newSubmitMethod();
            event.preventDefault();
        }
    }
});

Далее сделайте что-нибудь подобное, если вы хотите его использовать. 

<script type="text/javascript">
    /*if you want to validate the form on a submit call, 
      and you never want the form to be submitted via
      a normal submit operation, or maybe you want handle it.
    */
    $(function () {
        $.bypassDefaultSubmit('form1', submit);
    });
    function submit(){ 
        //do something, or nothing if you just want the validation
    }

</script>
1
ответ дан David Thompson 5 September 2018 в 10:34
поделиться

У меня была довольно сложная ситуация, когда мне нужно несколько кнопок отправки для обработки разных вещей. Например, «Сохранить и удалить».

Основа была в том, что она также была ненавязчивой, поэтому я не мог просто сделать ее обычной кнопкой. Но также хотелось использовать проверку html5.

Также событие отправки было переопределено в случае, если пользователь нажал enter, чтобы запустить ожидаемое представление по умолчанию; в этом примере save.

Вот как мы работаем с обработкой формы, которая все еще работает с / без javascript и с проверкой html5, с моментами отправки и нажатия.

jsFiddle Demo - проверка HTML5 с помощью переопределения submit и click

xHTML 

<form>
    <input type="text" required="required" value="" placeholder="test" />
    <button type="submit" name="save">Save</button>
    <button type="submit" name="delete">Delete</button>
</form>

JavaScript 

//wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts
//ensures jQuery is the only thing declared as $
(function($){
    var isValid = null;
    var form = $('form');
    var submitButton = form.find('button[type="submit"]')
    var saveButton = submitButton.filter('[name="save"]');
    var deleteButton = submitButton.filter('[name="delete"]');

    //submit form behavior
    var submitForm = function(e){
        console.log('form submit');
        //prevent form from submitting valid or invalid
        e.preventDefault();
        //user clicked and the form was not valid
        if(isValid === false){
            isValid = null;
            return false;
        }
        //user pressed enter, process as if they clicked save instead
        saveButton.trigger('click');
    };

    //override submit button behavior
    var submitClick = function(e){
        //Test form validitiy (HTML5) and store it in a global variable so both functions can use it
        isValid = form[0].checkValidity();
        if(false === isValid){
            //allow the browser's default submit event behavior 
            return true;
        }
        //prevent default behavior
        e.preventDefault();
        //additional processing - $.ajax() etc
        //.........
        alert('Success');
    };

    //override submit form event
    form.submit(submitForm);

    //override submit button click event
    submitButton.click(submitClick);
})(jQuery);

Предостережение по использованию Javascript заключается в том, что по умолчанию браузер должен по умолчанию распространяться в событие отправки, ДОЛЖНО появляться, чтобы отображать сообщения об ошибках без поддержки каждого браузера в вашем коде. В противном случае, если событие click переопределено event.preventDefault () или возвращает false, оно никогда не будет распространяться на событие отправки браузера.

Следует отметить, что в некоторых браузерах не будет запускаться форма отправки, когда пользователь нажимает enter, вместо этого он запускает первую кнопку отправки в форме. Следовательно, есть console.log ('form submit'), чтобы показать, что он не запускается.

2
ответ дан fyrye 5 September 2018 в 10:34
поделиться

Я нашел, что это решение работает для меня. Просто вызовите функцию javascript, как это: action = "javascript: myFunction ();" Тогда у вас есть проверка html5 ... очень просто: -)

19
ответ дан Martin Christensen 5 September 2018 в 10:34
поделиться 
$(document).on("submit", false);

submitButton.click(function(e) {
    if (form.checkValidity()) {
        form.submit();
    }
});
2
ответ дан Matias Elorriaga 5 September 2018 в 10:34
поделиться 
$("#form").submit(function() { $("#saveButton").attr("disabled", true); });

не лучший ответ, но работает для меня.

0
ответ дан Nunser 5 September 2018 в 10:34
поделиться

Вы говорите о двух разных вещах: «проверка HTML5» и проверка формы HTML с помощью javascript / jquery.

HTML5 имеет встроенные опции для проверки формы. Например, использование «обязательного» атрибута в поле, которое может (на основе реализации браузера) не отправлять форму без использования javascript / jquery.

С помощью javascrip / jquery вы можете сделать что-то вроде этого 

$('your_form_id').bind('submit', function() {
   // validate your form here
   return (valid) ? true : false;
});
6
ответ дан Peter Pajchl 5 September 2018 в 10:34
поделиться 
var $myForm = $('#myForm ');
if (!$myForm[0].checkValidity()) {
  $('<input type="submit">').hide().appendTo($myForm).click().remove();
}
2
ответ дан Rafik malek 5 September 2018 в 10:34
поделиться

Вот более общий способ, который немного чище:

Создайте свою форму как это (может быть фиктивная форма, которая ничего не делает): 

<form class="validateDontSubmit">
...

Привязать все формы, которые вы действительно не хотите подавать: 

$(document).on('submit','.validateDontSubmit',function (e) {
    //prevent the form from doing a submit
    e.preventDefault();
    return false;
})

Теперь скажем, что у вас есть <a> (в пределах <form>), что при нажатии вы хотите проверить форму: 

$('#myLink').click(function(e){
  //Leverage the HTML5 validation w/ ajax. Have to submit to get em. Wont actually submit cuz form
  //has .validateDontSubmit class
  var $theForm = $(this).closest('form');
  //Some browsers don't implement checkValidity
  if (( typeof($theForm[0].checkValidity) == "function" ) && !$theForm[0].checkValidity()) {
     return;
  }

  //if you've gotten here - play on playa'
});

Немногие примечания здесь:

  • Я заметил, что вам не нужно фактически отправлять форму для проверки - достаточно вызвать checkValidity() (по крайней мере, в хром). Если другие могут добавлять комментарии при тестировании этой теории в других браузерах, я обновлю этот ответ.
  • Вещь, которая запускает проверку, не должна находиться в пределах <form>. Это был просто чистый и гибкий способ решения общего назначения.
12
ответ дан rynop 5 September 2018 в 10:34
поделиться

Вы можете сделать это, не отправив форму.

Например, если кнопка отправки формы с идентификатором «поиск» находится в другой форме. Вы можете вызвать событие click на этой кнопке отправки и после этого вызвать ev.preventDefault. В моем случае я подтверждаю форму B из представления формы A. Подобно этому 

function validateFormB(ev){ // DOM Event object
  //search is in Form A
  $("#search").click();
  ev.preventDefault();
  //Form B validation from here on
}
2
ответ дан Seyeong Jeong 5 September 2018 в 10:34
поделиться

Чтобы проверить все необходимые поля формы без кнопки отправки, вы можете использовать функцию ниже.

Вы должны назначить требуемый атрибут элементам управления. 

  $("#btnSave").click(function () {
    $(":input[required]").each(function () {                     
        var myForm = $('#form1');
        if (!$myForm[0].checkValidity()) 
          {                
            $(myForm).submit();              
          }
        });
  });
2
ответ дан Swift Sharp 5 September 2018 в 10:34
поделиться 
    if $("form")[0].checkValidity()
      $.ajax(
        url: "url"
        type: "post"
        data: {

        }
        dataType: "json"
        success: (data) ->

      )
    else
      #important
      $("form")[0].reportValidity()

from: html5 подтверждение формы

6
ответ дан user1575761 5 September 2018 в 10:34
поделиться

Может опаздывать на вечеринку, но все-таки я нашел этот вопрос, пытаясь решить подобную проблему. Поскольку никакой код с этой страницы не работал для меня, между тем я придумал решение, которое работает как указано.

Проблема в том, что ваш <form> DOM содержит один элемент <button>, после которого он <button> будет автоматически суметь форму. Если вы играете с AJAX, вам, вероятно, необходимо предотвратить действие по умолчанию. Но есть улов: если вы это сделаете, вы также предотвратите базовую проверку HTML5. Следовательно, это хороший вызов для предотвращения по умолчанию на этой кнопке только в том случае, если форма действительна. В противном случае проверка HTML5 защитит вас от отправки. jQuery checkValidity() поможет с этим:

jQuery: 

$(document).ready(function() {
  $('#buttonID').on('click', function(event) {
    var isvalidate = $("#formID")[0].checkValidity();
    if (isvalidate) {
      event.preventDefault();
      // HERE YOU CAN PUT YOUR AJAX CALL
    }
  });
});

Код, описанный выше, позволит вам использовать базовую проверку HTML5 (с сопоставлением типов и шаблонов) БЕЗ отправки формы.

8
ответ дан vzr 5 September 2018 в 10:34
поделиться
Другие вопросы по тегам:

Похожие вопросы: