제출 전에 모든 입력 필드를 채우는 방법

사용자가 제출하기 전에 모든 입력 필드를 채우고 싶습니다. 내 입력 필드가 채워질 때까지 제출 단추를 사용하지 못하게했습니다. 또한 클라이언트 쪽에서 유효성을 검사하려고했지만 코드가 전달되지만 모든 필드가 채워지더라도 단추가 여전히 사용 가능하게 설정되지 않았습니다. 어떤 이유로 든 버튼이 계속 비활성화됩니다. 나는 내 JS 어떤 이유로 내 HTML 코드에 연결되지 않은 느낌 application.js제출 전에 모든 입력 필드를 채우는 방법

$('#url-input, #description').on('blur keypress', function() { 
    var urlInputLength = $('#url-input').val().length; 
    var descriptionInputLength = $('#description').val().length; 
    if (urlInputLength == 0 || descriptionInputLength == 0) { 
    $('button').prop('disabled',true); 
    } else { 
    $('button').prop('disabled',false); 
    } 
});

에서 이것을 시도

= simple_form_for @post, html: { multipart: true } do |f| 
    - if @post.errors.any? 
     #errors 
      %h2 
       = pluralize(@post.errors.count, "error") 
       prevented this Post from saving 
      %ul 
       - @post.errors.full_messages.each do |msg| 
        %li= msg 

    .form-group 
     = f.input :title,:label => "Project Name", input_html: { class: 'form-control', :type => "text", :required => "required", :autofocus => true} 
     %small#titleHelp.form-text.text-muted 

    .form-group 
     = f.input :image,:label => "Image", input_html: { class: 'form-group',"aria-describedby" => "fileHelp", :required => "required", :type => "file",:autofocus => true } 

    .form-group 
     = f.input :link,:label => "Project Link", input_html: { class: 'form-control', :type => "url", :value => "https://", :required => "required" , :autofocus => true, id:'url-input'} 


    .form-group 
     = f.input :description,:label => "Description", input_html: { class: 'form-control', :rows => "3", :required => "required" , :autofocus => true, id: 'description'} 
     %small#descriptionHelp.form-text.text-muted 


    %button.btn.btn-info{:type => "submit", :disabled => "disabled" } Add Project

: 같은

내 _form.html.haml 보인다. 또한 JS없이 작동하게하는 다른 방법이 있는지 궁금합니다.

미리 감사드립니다.

출처

2017-01-06 hekmat

생성 된 HTML도 공유 할 수 있습니까? – Deep

브라우저 콘솔의'on ('blur keypress')'함수 내에서 코드를 실행 해보십시오. 그러면 디버깅이 쉬워집니다. – Abhi

유효성 검사를 위해 구성 가능한 규칙에 대해 매우 정교하고 깨끗한 프레임 워크 인 https://jqueryvalidation.org/를 사용하십시오. –

validates :attribute, presence: true 양식의 필드 중 하나와 일치하는 각 속성에 대해 모든 필드를 채우지 않고도 계속 버튼을 클릭 할 수 있지만 모든 필드를 채울 때까지 동일한 페이지로 리디렉션됩니다. 사용자 정의 메시지를 추가하여 필드를 채우지 않고 제출하면 입력해야 할 정보를 알려주고 모든 필드가 채워지면 이동할 수 있습니다.

출처

2017-01-06 14:49:18 LBarry

'application.js'에 어디서 추가 할 수 있는지 보여 줄 수 있습니까? 나는 그것을 고마워 할 것이다 – hekmat

실제로'post' 모델에'application.js'에 포함하는 대신 추가 할 것입니다. 항상 자바 스크립트로 만들기보다는 검증을 통해 모델을 처리하도록하십시오. – LBarry

완벽한 !!! 이것은 정말로 도움이되었습니다, 감사합니다! – hekmat

제출 전에 모든 입력 필드를 채우는 방법

답변

관련 문제