Question

我正在使用带有表单的Ajax，向用户显示提交时是否一切正常（没有错误）或输入是否丢失。它应该是基本的。我正在使用XMLHttpRequest对象。该表格有四个字段，都是必填字段。我是使用Ajax的新手，您的帮助将非常好

这是我的表格

<form method="POST">
        @csrf
        <!-- Intitulé du thème -->
        <input type="text" name="intitule" id="intitule" placeholder="Intitulé du thème" required><br>
        <!-- Catégorie -->
        <select name="categorie" required>
            <option value="">-- Catégorie --</option>
            <option value="web">Développement web</option>
            <option value="appMobile">Programmation application mobile</option>
            <option value="secure">Sécurisation</option>
            <option value="other">Autre</option>
        </select> <br>
        <!-- Filière désirée -->
        <input type="checkbox" name="filiere[]" id="GL" value="GL" required>
        <label for="GL">Génie Logiciel</label><br>
        <input type="checkbox" name="filiere[]" id="SI" value="SI" required>
        <label for="SI">Sécurité Informatique</label><br>
        <input type="checkbox" name="filiere[]" id="IM" value="IM" required>
        <label for="IM">Internet et Multimédia</label><br>
        <input type="checkbox" name="filiere[]" id="SIRI" value="SIRI" required>
        <label for="SIRI">Systèmes d'Information et Réseaux Informatiques</label><br>
        <!-- Descriptif -->
        <textarea name="description" id="description" placeholder="Description de la thématique" required></textarea><br>

        <input type="submit" name="submit" id="submit" value="Ajouter">
        <span id="error-message" class="text-danger"></span>
        <span id="success-message" class="text-success"></span>
    </form>

在我的jquery代码中，无论是否选中复选框，我都声明变量itsChecked具有一个值。

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function (){
            var itsChecked = null;
            $('input[type=checkbox]').on('click', function(){
                if($('input[type=checkbox]:checked').length > 0){ //S'il y a au moins 1 ([...].length > 0) ckecked
                alert('At least one is checked');
                    itsChecked = 1;
                    $('#GL').removeAttr("required");
                    $('#SI').removeAttr("required");
                    $('#IM').removeAttr("required");
                    $('#SIRI').removeAttr("required");
                }
                else if(!$('input[type=checkbox]:checked').length > 0){ //S'il n'y a aucun checked (!(at least 1)>0)
                alert('None is checked');
                    itsChecked = 0;
                    $('#GL').attr('required','');
                    $('#SI').attr('required','');
                    $('#IM').attr('required','');
                    $('#SIRI').attr('required','');

            }
            });

对于Ajax部分，我使用了XHR对象。


            $('#submit').on('click', function(e){
                e.preventDefault();
                var xhr = getXMLHttpRequest();

                var titre = $('#intitule').val();
                var domaine = $('select[name=categorie]').val();
                var filiereChecked = [];
                $.each($("input[type='checkbox']:checked"), function(){            

                filiereChecked.push($(this).val());

                });
                var checked = filiereChecked.join(", ");
                var desc = $('#description').val();
                alert(itsChecked);

                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)){
                        // alert(xhr.responseText);
                        // console.log(xhr.responseText);
                        $('#error-message').html('');
                        $('#success-message').fadeIn().html(xhr.responseText);
                        setTimeout(function(){
                            $('#success-message').fadeOut('slow');
                        }, 2000);   
                        $('form').trigger('reset'); 
                    }
                    else if (titre == '' || domaine == '' || itsChecked == null || itsChecked == 0 || desc == ''){

                        $('#error-message').fadeIn().html('Tous les champs sont requis');
                        setTimeout(function(){
                            $('#error-message').fadeOut('slow');
                        },2000);
                        xhr.abort();
                    }
                };
                var url = "{{ route('themes.store') }}"; 
                var formValues = $("form").serialize();
                xhr.open('POST', url , true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send(formValues);

            });

我的问题在else语句上。对titre，domaine和desc的验证是可以的：我的意思是，当未通知其字段时，将返回错误消息，并且用户必须填写所有这些内容。

复选框组例外。这是itsChecked变量提供的帮助。因此，当它为“ null”或等于0时，应遵循相同的过程，并且用户必须正确填充。不知何故，当未选中它时，我收到错误消息，但是表单仍在数据库中提交，数据库中的复选框字段为空（NULL）。我在这里没弄错我在做什么。感谢帮助

Answer 1

我真的认为您的逻辑有缺陷。您试图在两个条件语句中放入不必要的Maybes。另外，只要有条件语句中的instance {-# OVERLAPPING #-} FromJSON a => FromJSON (Foo (Maybe a)) instance FromJSON a => FromJSON (Foo a)被调用提交按钮，就会发布该表单。尝试了解表单验证的工作原理，特别是xhr.onreadystatechange和类似方法的实现。这是我如何看待您的问题：

HTML

else

Javascript：

send()

等等，这可以满足您的需求。这是工作中的fiddle。

带有else语句的Ajax请求没有很好地响应

1 个答案: