AJAX 제출 전 JavaScript 유효성 검사

타일러 텍삼

내 ajax 제출을 허용하기 전에 양식의 유효성을 검사하려고하지만 두 가지 문제가 있습니다. 첫 번째 문제는 제출하기 전에 유효성을 검사하는 가장 좋은 방법을 모른다는 것입니다 (가장 전문적인 프로세스). 두 번째 문제는 현재 유효성 검사 코드가 작동하지 않는 이유는 무엇입니까? 모든 의견을 환영하므로 더 효율적으로되기를 원합니다. 정말 감사합니다.

 $('#form-reg').on('submit', function(){

     var bool = false;
     var name = document.getElementById('#name-reg');
     var email = document.getElementById('#email-reg');

     console.log(name);
     console.log(email);
     if(!/[^a-zA-Z]/.test(name)){
       bool = true;
     }
     else{
       bool = false;
     }
     if(bool == true){
        console.log(document.getElementById('#name-reg'));
        $('#form-reg').slideUp('slow');
        // serialize the form
        var formData = $(this).serialize();
        console.log(formData);
        $.ajax({
            type        : 'POST',
            url         : 'register.php',
            data        : formData,

            success: function() {
              alert("Success");
            },
             error: function(xhr) {
              alert("fail");
            }
        })
        .done(function (data) {
              document.getElementById('form-reg').reset();

        })
        .fail(function (error) {
            alert("POST failed");
        });
        //return false;
      }
      else {
        alert('try again');
      }
  });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript">

  <form id = "form-reg">
      <label id ="x" for="name">Name</label>
      <input id="name-reg" name="name"></br>
      <label id = "y" for="email">Email</label>
      <input id="email-reg" name="email"></br>
      <input type="submit" value="submit" id = "submit-reg">
    </form>

스티브

사소한 답변이지만 어쨌든 게시하겠습니다. 문제는

var name = document.getElementById ( '# name-reg');

#이 첫 번째 문제의 원인이며

var name = $ ( '# name-reg'). val ();

$('#form-reg').on('submit', function(){

     var bool = false;
     var name = $('#name-reg').val();
     var email = $('#email-reg').val();

     console.log(name);
     console.log(email);
     if(!/[^a-zA-Z]/.test(name)){
       bool = true;
     }
     else{
       bool = false;
     }
     if(bool == true){
        console.log($('#name-reg').val());
        $('#form-reg').slideUp('slow');
        // serialize the form
        var formData = $(this).serialize();
        console.log(formData);
        $.ajax({
            type        : 'POST',
            url         : 'register.php',
            data        : formData,

            success: function() {
              alert("Success");
            },
             error: function(xhr) {
              alert("fail");
            }
        })
        .done(function (data) {
              document.getElementById('form-reg').reset();

        })
        .fail(function (error) {
            alert("POST failed");
        });
        //return false;
      }
      else {
        alert('try again');
      }
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript">

  <form id = "form-reg">
      <label id ="x" for="name">Name</label>
      <input id="name-reg" name="name"></br>
      <label id = "y" for="email">Email</label>
      <input id="email-reg" name="email"></br>
      <input type="submit" value="submit" id = "submit-reg">
    </form>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

제출 전 Ajax 유효성 검사

분류에서Dev

양식 제출 문제 전에 jquery ajax 유효성 검사

분류에서Dev

제출하기 전에 Ajax에서 CSS 양식 유효성 검사를 사용하는 방법

분류에서Dev

데이터를 보내기 전에 ajax 제출 포스트 메소드 유효성 검사

분류에서Dev

JQuery Ajax 제출 함수 추가 유효성 검사

분류에서Dev

Ajax 양식 유효성 검사 및 제출

분류에서Dev

제출시 AJAX 양식 유효성 검사

분류에서Dev

제출 전 반응 후크 양식 유효성 검사

분류에서Dev

제출 전 스프링 유효성 검사 (Method.GET)

분류에서Dev

유효성 검사 전에 양식 제출

분류에서Dev

제출하기 전에 양식 유효성 검사 수행-jQuery

분류에서Dev

제출 전 PHP 체크 박스 유효성 검사

분류에서Dev

JQuery 제출 양식 전에 필수 필드 유효성 검사

분류에서Dev

JavaScript 유효성 검사 문제

분류에서Dev

입력 유효성 검사 후 팝업 및 Javascript 제출

분류에서Dev

PHP 유효성 검사 후 javascript / jquery로 양식 제출

분류에서Dev

Javascript 양식 유효성 검사 제출시 경고 없음

분류에서Dev

AJAX 버튼 제출을위한 HTML5 양식 유효성 검사

분류에서Dev

제출 양식 Ajax 게시물에 대한 유효성 검사하기

분류에서Dev

jQuery-Ajax 후 유효성 검사로 promise 내부 제출 방지

분류에서Dev

Onlick 제출 리디렉션 전에 필요한 입력 유효성 검사

분류에서Dev

2checkout에서 제출하기 전에 양식 유효성 검사

분류에서Dev

PHP 함수를 Javascript / AJAX 유효성 검사로 변경

분류에서Dev

AJAX를 사용한 Spring 4.0 양식 유효성 검사 문제

분류에서Dev

AJAX를 사용한 Spring 4.0 양식 유효성 검사 문제

분류에서Dev

ajax 호출에 대한 select 값 유효성 검증 문제

분류에서Dev

Primefaces-유효성 검사를 통과 한 후 작업 메서드가 호출되기 전에 만 Javascript 실행

분류에서Dev

폼 유효성 검사기에서 $ .ajax 호출

분류에서Dev

양식 제출시 Javascript 유효성 검사가 실행되지 않음

Related 관련 기사

  1. 1

    제출 전 Ajax 유효성 검사

  2. 2

    양식 제출 문제 전에 jquery ajax 유효성 검사

  3. 3

    제출하기 전에 Ajax에서 CSS 양식 유효성 검사를 사용하는 방법

  4. 4

    데이터를 보내기 전에 ajax 제출 포스트 메소드 유효성 검사

  5. 5

    JQuery Ajax 제출 함수 추가 유효성 검사

  6. 6

    Ajax 양식 유효성 검사 및 제출

  7. 7

    제출시 AJAX 양식 유효성 검사

  8. 8

    제출 전 반응 후크 양식 유효성 검사

  9. 9

    제출 전 스프링 유효성 검사 (Method.GET)

  10. 10

    유효성 검사 전에 양식 제출

  11. 11

    제출하기 전에 양식 유효성 검사 수행-jQuery

  12. 12

    제출 전 PHP 체크 박스 유효성 검사

  13. 13

    JQuery 제출 양식 전에 필수 필드 유효성 검사

  14. 14

    JavaScript 유효성 검사 문제

  15. 15

    입력 유효성 검사 후 팝업 및 Javascript 제출

  16. 16

    PHP 유효성 검사 후 javascript / jquery로 양식 제출

  17. 17

    Javascript 양식 유효성 검사 제출시 경고 없음

  18. 18

    AJAX 버튼 제출을위한 HTML5 양식 유효성 검사

  19. 19

    제출 양식 Ajax 게시물에 대한 유효성 검사하기

  20. 20

    jQuery-Ajax 후 유효성 검사로 promise 내부 제출 방지

  21. 21

    Onlick 제출 리디렉션 전에 필요한 입력 유효성 검사

  22. 22

    2checkout에서 제출하기 전에 양식 유효성 검사

  23. 23

    PHP 함수를 Javascript / AJAX 유효성 검사로 변경

  24. 24

    AJAX를 사용한 Spring 4.0 양식 유효성 검사 문제

  25. 25

    AJAX를 사용한 Spring 4.0 양식 유효성 검사 문제

  26. 26

    ajax 호출에 대한 select 값 유효성 검증 문제

  27. 27

    Primefaces-유효성 검사를 통과 한 후 작업 메서드가 호출되기 전에 만 Javascript 실행

  28. 28

    폼 유효성 검사기에서 $ .ajax 호출

  29. 29

    양식 제출시 Javascript 유효성 검사가 실행되지 않음

뜨겁다태그

보관