Проверка формы AJAX в шаблоне Django

Question

Я практикую AJAX в шаблонном проекте django, у меня есть форма регистрации, где у меня есть 4 поля для отправки, я использую функцию кнопки регистрации для реализации функции ajax, она работает нормально, но проблема в том, что я держу форму пустойи нажатие кнопки также отправляет, так как я могу проверить поля, чтобы, когда не было никаких значений, отображалось сообщение об ошибке msg для заполнения всех полей?Спасибо заранее.

    <script>
    $(document).ready(function(){
         $('#signup-btn').click(function(event){
            console.log('hi-signup')

            $.ajax({
                method: "POST",
                url: '/register',
                data: {
                    name :$('#id_fullname').val(),
                    email : $('#id_email').val(),
                    country : $('#id_country').val(),
                    password : $('#id_password').val(),
                    csrfmiddlewaretoken:'{{ csrf_token }}',

                },

                success: function(res) {
                var response = $.parseJSON(res)
                $('.signup-data').html(response.msg)
                          if (response.code == 200) {
                            $('.signup-data').html(response.msg);
                            window.location = "http://localhost:8000";
                        }
                        },
            })

        })

    })
</script>

html

  <form  class="my-signup-form" action="/register" method="post">
                                  {% csrf_token %}
                                  <div class="signup-data"></div>
                                  <div class="top-row">
                                    <div class="field-wrap">
                                      <input name="signup-fullname" id="id_fullname" type="text" required autocomplete="off" placeholder="Full Name"/>
                                    </div>

                                    <div class="field-wrap">
                                      <input name="signup-email" id="id_email" type="text"required autocomplete="off" placeholder="Email ID"/>
                                    </div>
                                  </div>

                                  <div class="field-wrap select2">
                                    <span class="select-arrow"></span>
                                    <select name="signup-country" id="id_country" class="selextbox">
                                     <option value="" selected disabled>Select your country</option>
                                    <option value="United States">United States</option>
                                    <option value="United Kingdom">United Kingdom</option>
                                    <option value="Afghanistan">Afghanistan</option>

                                </select>
                                  </div>


                                  <div class="field-wrap">
                                    <input name="signup-password" id="id_password" type="password"required autocomplete="off" placeholder="Password"/>
                                  </div>
                                  <p class="charcters">Minimum 8 Charcters</p>

                                  <button id="signup-btn" type="button" class="button button-block"/>Get Started</button>

                              </form>

Answer 1

Я помню, это то, что я делал раньше в одной из моих попыток приложения:

$(document).ready(function(){

$('#signup-btn').click(function(){

    formValidate();   

     console.log('hi-signup')

            $.ajax({
                method: "POST",
                url: '/register',
                data: {
                    name :$('#id_fullname').val(),
                    email : $('#id_email').val(),
                    country : $('#id_country').val(),
                    password : $('#id_password').val(),
                    csrfmiddlewaretoken:'{{ csrf_token }}',

                },

                success: function(res) {
                var response = $.parseJSON(res)
                $('.signup-data').html(response.msg)
                          if (response.code == 200) {
                            $('.signup-data').html(response.msg);
                            window.location = "http://localhost:8000";
                        }
                        },
            })

        })

function formValidate(){

    var name = $('#id_fullname').val();
    var email = $('#id_email').val();

    var country = $('#id_country').val();
    var password = $('#id_password').val();

    var nameReg = /^[A-Za-z]+$/;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var inputValue = new Array(name, email, country, password);

    var inputMessage = new Array("name", "email", "country", "password");

     $('.error-message').hide();

        if(inputValue[0] == ""){
            $('#id_fullname').after('<span class="error-message"> Please enter your ' + inputMessage[0] + '</span>');
        } 
        else if(!nameReg.test(name)){
            $('#id_fullname').after('<span class="error-message"> Letters only</span>');
        }

        if(inputVal[1] == ""){
            $('#id_email').after('<span class="error-message"> Please enter your ' + inputMessage[1] + '</span>');
        } 
        else if(!emailReg.test(email)){
            $('#id_email').after('<span class="error-message"> Please enter a valid email address</span>');
        }

        if(inputVal[2] == ""){
            $('#id_country').after('<span class="error-message"> Please enter your ' + inputMessage[2] + '</span>');
        } 

        if(inputVal[3] == ""){
            $('#id_password').after('<span class="error-message"> Please enter your ' + inputMessage[3] + '</span>');
        }       
}   

});

Answer 2

<script>
            $('#signup-btn').click(function(event){
                if(validate()){
                    $.ajax({
                        method: "POST",
                        url: '/register',
                        data: {
                            name :$('#id_fullname').val(),
                            email : $('#id_email').val(),
                            country : $('#id_country').val(),
                            password : $('#id_password').val(),
                            csrfmiddlewaretoken:'{{ csrf_token }}',

                        },
                        success: function(res) {
                            var response = $.parseJSON(res)
                            $('.signup-data').html(response.msg)
                                  if (response.code == 200) {
                                  $('.signup-data').html(response.msg);
                                  window.location = "http://localhost:8000";
                            }
                         },
                    })

                  })
                }

            })

            function validate(){

                var isValid = true;
                if (!$('#id_fullname').val()){
                    isValid = false
                }
                if (!$('#id_email').val()){
                    isValid = false
                }else{
                   if(!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($('#id_email').val()))){
                        isValid = false; 
                    }
                }
                if (!$('#id_country').val()){
                    isValid = false
                }
                if (!$('#id_password').val()){
                    isValid = false
                }
                return isValid;
            }
</script>