Home » Php » input type file and server side validation in amp (accelerated mobile pages)

input type file and server side validation in amp (accelerated mobile pages)

Posted by: admin October 26, 2017 Leave a comment

Questions:

i am using amp for a web site i am creating. there i am implementing a simple form for apply now page where there a user can upload a pdf file as thier cvs. how to validate and let user know if the file is pdf,file size etc etc. also i want to have server side validations to know it an user has already applied for the same vacancy using the given email address and if so show it under the email input tag. seems like there is no way to do that with amp. below is the form i have built using amp.

tried to implement validation with javascript. but with AMP cant even override the form submit function as well

<form enctype="multipart/form-data" method="post" target="_top" action-xhr="#" id="form_applynow">
         <div class="form-group">
            <div class="row">
               <div class="col-md-4">
                  <label for="inputName" class="control-label">
                  First Name <span class="red">*</span></label>
               </div>
               <div class="col-sm-8">
                  <input  value="" class="form-control" name="fname" id="fname" type="text" autocomplete="off">
               </div>
            </div>
         </div>
         <div class="form-group">
            <div class="row">
               <div class="col-md-4">
                  <label for="lname" class="control-label">
                  Last Name <span class="red">*</span></label>
               </div>
               <div class="col-sm-8">
                  <input  value="" class="form-control" name="lname" id="lname" type="text" autocomplete="off">
               </div>
            </div>
         </div>
         <div class="form-group">
            <div class="row">
               <div class="col-md-4">
                  <label for="email" class="control-label">
                  Email address <span class="red">*</span></label>
               </div>
               <div class="col-sm-8">
                  <input  value="" class="form-control" name="email" id="email" type="text" autocomplete="off">
               </div>
            </div>
         </div>
         <div class="form-group">
            <div class="row">
               <div class="col-md-4">
                  <label for="contactno" class="control-label">
                  Phone Number <span class="red">*</span></label>
               </div>
               <div class="col-sm-8">
                  <input  value="" class="form-control" name="contactno" id="contactno" type="text" autocomplete="off">
               </div>
            </div>
         </div>
         <div class="form-group">
            <div class="row">
               <div class="col-md-4">
                  <label for="educationq" class="control-label">
                  Educational Qualification  <span class="red">*</span></label>
               </div>
               <div class="col-sm-8">
                  <textarea class="form-control" name="educationq" id="educationq" autocomplete="off"></textarea>

               </div>
            </div>
         </div>

         <div class="form-group">
            <div class="row">
               <div class="col-md-4">
                  <label for="position" class="control-label">
                 Position Applied For  <span class="red">*</span></label>
               </div>
               <div class="col-sm-8">
                  <select class="form-control" name="position" id="position">
                    <option>daasdad</option>
                  </select>
               </div>
            </div>
         </div>

         <div class="form-group">
            <div class="row">
               <div class="col-md-4">
                  <label for="location" class="control-label">
                  Location  <span class="red">*</span></label>
               </div>
               <div class="col-sm-8">
                  <input  value="" class="form-control" name="location" id="location" type="text" autocomplete="off">

               </div>
            </div>
         </div>

         <div class="form-group">
            <div class="row">
               <div class="col-md-4">
                  <label for="cv" class="control-label">
                  Upload your CV  <span class="red">*</span></label>
               </div>
               <div class="col-sm-8">
                  <input  value="" class="form-control" name="cv" id="cv" type="file" autocomplete="off">
               </div>
            </div>
         </div>

      <input type="submit" value="Apply"  class="btn_a btnn" / >
      <div submit-success>
            <template type="amp-mustache">
              Subscription successful! {{name}}
              <script> alert("asd")  </script>
            </template>
          </div>
          <div submit-error>
            <template type="amp-mustache">
              Subscription failed!
            </template>
          </div>
      </form>
Answers:

You can achieve by error response

HTML CODE

<div submit-error>
    <template type="amp-mustache">
    {{msg}}
    </template>
  </div>

RESPONSE CODE

header("HTTP/1.0 412 Precondition Failed", true, 412);
$data = array('msg'=>'User already exit');
echo json_encode($data);exit;

The submit-success and submit-error divs are rendered based on the status code of the server response. For error responses, the status code needs to be in the 4XX or 5XX range and For success responses, the status code needs to be in the 2XX

For more information please refer this link