ajax form

아약스 형식

경기력 향상 약물에 대한 HTML 양식.

참고: Ajax-form은 Polymer에 연결되지 않습니다. 실제로 종속성이 전혀 없지만 Polymer 또는 기타 사용자 정의 요소 라이브러리와 잘 작동합니다. 간단한 사용자 정의 요소 폴리필을 사용하려는 경우 ajax-form도 최선의 선택입니다.

전통적인 <form> 에 어떤 문제가 있나요?

1. 양식 제출은 페이지를 변경/다시 로드하므로 이를 적절하게 방지하는 것은 쉽지 않습니다.

2. 제출된 양식으로 사용자 정의 헤더를 보낼 수 없습니다.

3. 양식이 제출된 후에는 서버 응답을 (쉽게) 구문 분석할 수 없습니다.

4. 잘못된 양식/필드를 프로그래밍 방식으로 추적하는 것은 실망스럽습니다.

5. 양식 데이터를 JSON으로 보낼 수 없습니다.

6. 사용자가 입력한 데이터를 서버로 보내기 전에 프로그래밍 방식으로 늘릴 수 있는 기회는 없습니다.

7. 사용자 정의 양식 요소(예: 웹 구성 요소 사양을 사용하여 생성된 요소)는 기존의 순수한 <form> 사용하여 제출할 수 없습니다.

ajax-form 사용자 정의 요소는 기존 <form> 보강하여 추가 기능을 제공하고 위에 나열된 문제를 해결합니다. 전체 문서 및 데모는 API 문서 페이지를 참조하세요.

설치

npm install ajax-form

사용

<form> 요소 마크업에 포함 해야 하는 필수 is="ajax-form" 속성을 제외하고 기존 양식을 사용하는 것과 마찬가지로 ajax-form을 사용하세요. ajax-form은 웹 구성 요소이므로 WC 사양을 구현하지 않는 브라우저가 ajax-form을 사용할 수 있도록 하려면 webcomComponents.js와 같은 웹 구성 요소 폴리필을 포함해야 할 수도 있습니다. Ajax-form에는 엄격한 종속성이 없습니다 .

ajax-form 의 매우 간단한 사용은 is 속성을 추가하면 일반 <form> 과 비슷해 보입니다.

 <form is="ajax-form" action="my/form/handler" method="post"><label>이름을 입력하세요: <input type="text" name="full_name"></label>.. .</form>

전체 문서 및 데모는 API 문서 페이지를 참조하세요.

완성

양식 필드 웹 구성 요소를 개발 중입니까? 귀하의 필드가 ajax-form과 올바르게 통합되었는지 확인하려면 아래 지침을 읽으십시오.

제출 중

사용자 정의 요소가 필드의 현재 값을 포함하는 value 속성을 노출하는 경우 구성 요소는 ajax 양식에 잘 통합됩니다. 이것이 사실이 아닌 경우 사용자 정의 필드는 기본 HTML 양식 필드가 Light DOM의 일부인지 확인해야 합니다. 두 경우 모두 value 속성이 있는 요소에는 name 속성도 포함되어야 합니다. 사용자/통합자는 이 필드에 적절한 값을 포함해야 합니다.

확인

사용자 정의 필드가 light DOM의 기본 HTML 양식 필드를 노출하는 경우 더 이상 수행할 작업이 없습니다. ajax-form은 사용자/통합자가 필드에 추가하는 모든 유효성 검사를 존중합니다. 제약 조건 속성은 기본 HTML 양식 필드에 배치되어야 합니다.

사용자 정의 필드가 기본적으로 light DOM의 기본 HTML 양식 필드를 노출하지 않고 Ajax-form이 유효성 검사 제약 조건을 준수하도록 하려면 이를 설명하기 위한 약간의 코드를 포함해야 합니다. 따라야 할 단계는 다음과 같습니다.

1. 필드 바로 앞에 light DOM에 불투명한 0x0 <input type="text"> 필드를 추가합니다.

2. 필드와 동일한 값을 사용하여 customElementRef 속성을 입력에 추가합니다.

3. 입력의 유효성이 항상 필드의 유효성과 일치하는지 확인하십시오. HTMLInputElement 에 있는 setCustomValidity 메소드를 통해 이 작업을 수행할 수 있습니다.

예시는 <file-input> 맞춤 요소 소스 코드의 setValidationTarget 메소드를 참조하세요.

테스트

npm install
npm install -g grunt-cli
grunt

• 매개변수 없이 grunt 실행하면 로컬에 설치된 몇 가지 브라우저에 대해 테스트됩니다(자세한 내용은 코드베이스 참조).

• grunt shell:wctSauce 실행하면 SauceLabs의 여러 브라우저에 대해 테스트가 실행됩니다. 먼저 SauceLabs 사용자 이름과 키가 적절한 환경 변수에 연결되어 있는지 확인하세요.