Use maxlength

<input type="text" maxlength="10" />

for email validation, <input type="email"> is enough..

for mobile no use pattern attribute for input as follows:

<input type="number" pattern="\d{3}[\-]\d{3}[\-]\d{4}" required>

you can check for more patterns on http://html5pattern.com.

for focusing on field, you can use onkeyup() event as:

function check()
{

    var mobile = document.getElementById('mobile');
   
    
    var message = document.getElementById('message');

   var goodColor = "#0C6";
    var badColor = "#FF9B37";
  
    if(mobile.value.length!=10){
       
        mobile.style.backgroundColor = badColor;
        message.style.color = badColor;
        message.innerHTML = "required 10 digits, match requested format!"
    }}

and your HTML code should be:

<input name="mobile"  id="mobile" type="number" required onkeyup="check(); return false;" ><span id="message"></span>

How about this? /(7|8|9)\d{9}/

It starts by either looking for 7 or 8 or 9, and then followed by 9 digits.

As per my comment above, try this:

<div class="form-group">
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" placeholder="+910123456789 or 0123456789" pattern="[+0-9]{10,13}">
</div>

You can test Regex here: https://regex101.com/

function displayInputValue() {
  console.log(document.querySelector("input[type='tel']").value)
}

<div class="form-group">
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" placeholder="+910123456789 or 0123456789" pattern="[+0-9]{10,13}">
  <button type="button" onClick="displayInputValue()">Show Value</button>
</div>