2017-01-09 2 views
0

저는 Bootsrap 양식을 .NET에서 제공되는 Kentico CMS에 통합하려고합니다. 그렇게하면서 "form"태그가 제 형식에서 제거되고있는 것으로 나타났습니다.부트 스트랩이있는 .NET 양식 3.3.5

Kentico Support에서 다음을 받았습니다. 사용자 지정 양식 태그가 ASP.NET WebForms에서 지원되지 않습니다. 문제는 ASP.NET에서 전체 페이지가 양식 태그 (이 태그는 Kentico와 관련없는 표준 .NET 동작)에 래핑되고 HTML 표준은 중첩 된 양식 태그를 허용하지 않는다는 것입니다.

HTML 형식의 오류 처리 기능을 갖춘 페이지 템플릿이 있습니다. .NET 프로그래밍 경험이 없습니다. 누구든지 어떻게 부트 스트랩 양식 오류 처리 및 제출 내에서 제대로 작동하는지 얻을 수있는 날 지점 수 있습니까?

감사합니다.

가 여기에 현재의 형식입니다 :

<form action="" method="post" id="contact_form"> 
    <div class="col-md-12"> 
     <div class="col-md-6 zero-margin-bottom"> 
      <div class="form-group"> 
       <label for="Company">Company</label> 
       <input name="company" type="company" class="form-control" id="exampleInputCompany" placeholder="Company"> 
      </div> 
      <div class="form-group"> 
       <label for="FirstName">First Name</label> 
       <input name="first_name" type="firstname" class="form-control" id="exampleInputFirstName" placeholder="First Name"> 
      </div> 
      <div class="form-group"> 
       <label for="LastName">Last Name</label> 
       <input name="last_name" type="lastname" class="form-control" id="exampleInputLastName" placeholder="Last Name"> 
      </div> 
     </div> 
     <div class="col-md-6 zero-margin-bottom"> 
      <div class="form-group"> 
       <label for="exampleInputEmail1">Email address</label> 
       <input name="email" type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
      </div> 
      <div class="form-group"> 
       <label for="exampleInputPassword1">Phone</label> 
       <input name="phone" type="phone" class="form-control" id="exampleInputPhome" placeholder="Phone"> 
      </div> 
      <div class="form-group"> 
       <label for="country">Country</label> 
       <select name="country" class="form-control"> 
        <option value="">Select Country</option> 
        <option value="Abu Dhabui">Abu Dhabui</option> 
        <option value="...">Afghanistan</option> 
       </select> 
      </div> 
     </div> 
     <div class="col-md-12 zero-margin-bottom"> 
      <div class="form-group"> 
       <label for="comments">Comments:</label> 
       <textarea name="comment" class="form-control" rows="3"></textarea> 
      </div> 
      <button type="submit" class="btn btn-default submit btn-danger">Send Request</button> 
     </div> 
    </div> 
</form> 
+0

나는 Kentico에 대해 아무것도 몰라, 그들의 웹 사이트 주장 개발자들은 표준 .Net 컨트롤을 사용할 수있다. 나는 그 길을 시도 할 것이다. Visual Studio를 사용하여 작업중인 작품을 만드시겠습니까? –

+0

나는 그렇지 않습니다. 나는 스타일이있는 Bootstrap HTML을 개발하여 그것을 Kentico 내의 템플릿으로 통합하고 있습니다. 또 다른 부분은 아래 코드를 사용하여 CRM에 양식을 게시해야한다는 것입니다. <폼 ID = "기본-행동"행동 = ""클래스 = "순수한 형태"ID = ""방법 = "GET"> = <입력 유형 = 숨겨진 이름 = "고객"값을 "..." > <입력 유형 = 숨겨진 이름 ="DialogID "값 ="243 "> <입력 유형 = 숨겨진 이름 ="rurl "값 =" "> –

+0

양식, HTML 페이지의 다음 몸 전체가 이미'

'태그에 싸여있다. 페이지 내부에 다른 양식을 추가하면 HTML 표준은 불법이므로 내부 양식이 DOM에서 삭제된다는 지시를 보냅니다. – krillgar

답변

0

<form> 태그를 제거, 그것은 필요 아니에요. 스타일이 해당 양식 태그에 따라 다르면 모든 양식 요소를 감싸는 div에 다른 클래스를 추가하십시오. 기본적으로 <form>은 asp.net 웹 폼 개발을 사용하여 <form>에 중첩 될 수 없습니다. Kentico의 포털 개발 모델은 이것을 사용하고 있으며 <form> 태그가 파일 시스템의 마스터 페이지 템플릿에 있으므로 (매번 수정하지 않는 것이 좋습니다) 매번 문제가 발생할 것입니다.

+0

양식 태그를 제거하고 양식 필드를 감싸는 div에 id = "contact_form"을 추가하면 부트 스트랩 오류 유효성 검사가 더 이상 작동하지 않습니다. –

+0

그런 다음 추가 클래스를 추가하거나 CSS 클래스 중 일부를 재정의하거나 일부 부트 스트랩 JavaScript 처리기를 재정의해야 할 수 있습니다. 콘솔 창에 JS 오류가 있습니까? –

+0

아직 JS 오류가없고 유효성 검사가 성공하지 못했습니다. –

1

부트 스트랩 검증은 양식 태그에 의존하지 않습니다. 기본적으로 부모 요소에 .has-error 클래스를 추가합니다. 검사기 (Chrome의 F12)를 사용하여 마크 업을 확인하고 남성의 확실한 .has-error 클래스가 상위 요소에 추가되었습니다.

부트 스트랩에는 오류, 경고 및 성공을위한 유효성 검사 스타일이 포함되어 있습니다. 상태가 양식 컨트롤에 있습니다. 사용하려면 .has-warning, .has-error 또는 .has-success를 상위 요소에 추가하십시오. .control-label, .form-control, 및 해당 요소 내의 .help-block은 확인 스타일을 수신합니다.

자세한 내용을 알아보십시오 here.

Here이 작동하는 예입니다.

+0

이 예제는 시작점이었습니다. form 태그는 컨테이너 div 뒤에옵니다. 폼 태그를 div로 변경하려고하면 유효성 검사가 더 이상 작동하지 않습니다. –

관련 문제