General problems in payment form in html

Question

So i am trying to create a payment form for a custom website.There is only one rule :no JavaScript allowed. Here is my code:

<!DOCTYPE html>
<html>
<style>
input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: red;
}

div {
    border-radius: 5px;
    background-color: lightgrey;
    padding: 40px;
}
</style>
<body>

<div class="login-page">
  <div class="form">

    <form class="login-form">
<fieldset>
<h1>Log in </h1>
      <input type="text" placeholder="username" required/>
      <input type="password" placeholder="password"required/>
      </fieldset>
    </form>

       <form class="Payment">
<fieldset>
<h1> Payment </h1>
     <select>
  <option value="Payment on pickup">Payment on pickup</option>
  <option value="Bank transfer/deposit">Bank transfer/deposit</option>
  <option value="Credit/Debit card">Credit/Debit card</option>

  </select>
<div id="mobile_creditcard" style="display: block;">
<select name="cardtype" class="form">
<option value="VISA">VISA</option>
<option value="MasterCard">MasterCard</option>
</select>
<br>Αριθμός κάρτας<br>
<input type="text" name="cardnumber"  style="width:80%;" maxlength="20" value="" required>

 <tr> 
    <td height="22" align="right" valign="middle">Expiry Date:</td>
    <td colspan="2" align="left">
      <SELECT NAME="CCExpiresMonth" >
        <OPTION VALUE="" SELECTED>--Month--
        <OPTION VALUE="01">January (01)
        <OPTION VALUE="02">February (02)
        <OPTION VALUE="03">March (03)
        <OPTION VALUE="04">April (04)
        <OPTION VALUE="05">May (05)
        <OPTION VALUE="06">June (06)
        <OPTION VALUE="07">July (07)
        <OPTION VALUE="08">August (08)
        <OPTION VALUE="09">September (09)
        <OPTION VALUE="10">October (10)
        <OPTION VALUE="11">November (11)
        <OPTION VALUE="12">December (12)
      </SELECT> 
      <SELECT NAME="CCExpiresYear">
        <OPTION VALUE="" SELECTED>--Year--
        <OPTION VALUE="04">2004
        <OPTION VALUE="05">2005
        <OPTION VALUE="06">2006
        <OPTION VALUE="07">2007
        <OPTION VALUE="08">2008
        <OPTION VALUE="09">2009
        <OPTION VALUE="10">2010
        <OPTION VALUE="11">2011
        <OPTION VALUE="12">2012
        <OPTION VALUE="13">2013
        <OPTION VALUE="14">2014
        <OPTION VALUE="15">2015
      </SELECT>
    </td>
  </tr>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody><tr><td width="50%">
Όνομα κατόχου<br><input type="text"  style="width:70%;" name="cardholder" value="" required>
</td><td width="50%">
Τηλέφωνο κατόχου<br><input type="text"style="width:70%;" name="cardholderpho" value="" required>
</td></tr>
</tbody></table>

</div>
   </fieldset>
<button type="submit">Submit Payment</button>
    </form>

  </div>

</div>

</body>
</html>

I have 3 problems and i need help.Firstly i want the submit button to check if username andpassword inputs are not given, and if not to give same message for card info(it works if card info is not given) and even though i used the required attribute it doesnt work.

Second problem i cannot fix is that i want to make the credit/debit card form visible***only if *** the debit/credit card payment option is selected.How can i do that?

And last but not least.How can i make the password to be atleast 5 digits indluding 1 upper case and 1 number??

You have three separate problems here, bundling them up into a single question makes it less likely you'll get good answers. — Quentin, Apr 15 '16 at 14:20
I dont expect someone to asnwer them all together... I want as many as possible asnwered. — Aggelos Sfakianos, Apr 15 '16 at 14:21
Stackoverflow expects people to ask a question, get one or more answers to that question and then pick the best answer. You can't pick the best answer if you ask three questions at once, and then get three answers which each answer one of them. Limit yourself to one question per question. — Quentin, Apr 15 '16 at 14:22
Well thats true but i think whoever is going answer this question is gonna answer all three of them probably so i am gonna wait for an answer and if nothing happens then i am gonna divide into three?Are we good now? — Aggelos Sfakianos, Apr 15 '16 at 14:24
As far as i know there is no other language invented or updated to work with html and manipulating it. Good luck man. — E.Agolli, Apr 15 '16 at 14:27
well can you at least answer the second question? I am certain it can be done without JS ... How can i make card information form pop up only when credit/debit card payment is selected out of the three payment options. — Aggelos Sfakianos, Apr 15 '16 at 14:30

score 1 · Answer 1 · answered Apr 15 '16 at 14:25

1

If you can't use Javascript then you have to make all these validations on the server side, therefore, AFTER submitting the form

answered Apr 15 '16 at 14:25

rubentd

1,245
11
25

score 1 · Accepted Answer · edited May 23 '17 at 11:50

submit button to check if username and password inputs are not given,

You have two separate form in your page & submit button is associated with second form, so it is not checking the username & password. Either use a single form or use two separate button to invoke all the validations

password to be atleast 5 digits including 1 upper case and 1 number

HTML5 comes with min & max attribute and also pattern matching for input. To check password for min of 5 letter you can use min attribute , to validate if atleast one 1 upper case & 1 number is present in password you have to use regex in pattern attribute. You can follow W3C to know more about pattern attribute & this LINK to know more about the required regex

credit/debit card form visible***only if *** the debit/credit card payment option is selected

This actually requires a event handler. Not sure if it can be done with only css

General problems in payment form in html

2 Answers2