clear and validate fields

You do not need to complicate with libraries for these simple validations, all you have to do is send your element as such ( this ) to your validation functions, then in the function you can manipulate its value and do your logic without no problem.

As additional information I would advise you better to use the event onchange which is the event that triggers when a change in the value of input is detected.

I leave the functional example

function validanumero(elemento){
  if (!/^([0-9])*$/.test(elemento.value)){
      alert("Ingrese solo numeros");
      elemento.value = '';
  }
}

function validatexto(elemento){
  if (!/^([a-zA-Zá-ú])*$/.test(elemento.value)){
      alert("Ingrese solo numeros");
      elemento.value = '';
  }
}

<label>Solo números:</label>
<input class="cajas" type="text" name="username" maxlength="10" onchange="return validanumero(this)" required title="Solo 
 numeros">
 
 <br><br>
 
 <label>Solo letras:</label>
 <input class="cajas" type="text" name="username" maxlength="10" onchange="return validatexto(this)" required title="Solo 
 numeros">

For that functionality and if you're new you can use a very good library jQuery-Mask-Plugin with it you can validate and make masks so that you can not enter in this case only numbers or otherwise only letters until we can validate the entry of special characters.

For the example in the library we passed in pattern a Regular Expresion with what you need I leave you example of only numero and letras .

Functional Example

$("#inputSoloNumeros").mask('ZZ',{translation:  {'Z': {pattern: /[0-9\s]/, recursive: true}}});

$("#inputSoloLetras").mask('ZZ',{translation:  {'Z': {pattern: /[áéíóúñüàèa-zA-Z\s]/, recursive: true}}});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.min.js"></script>
<label for="">Solo Numeros</label>
  <input id="inputSoloNumeros" type="text" name="" value="">
  <br>
  <br>
  <label for="">Solo Letras</label>
  <input id="inputSoloLetras" type="text" name="" value="">

You can put a id to input in the html so you can handle it and manipulate it from JavaScript.

After assigning a id , you save the input in a variable, with the getElementById() method, which is basic for handling DOM , in which you spend the id that you have assigned in the html . In this way, you can handle the input from JavaScript with different methods and functions.

Finally, objects of type input have the property value that represents their value. To clear the field you can pass it an empty value, and the text of the input will be erased. The syntax would be elementoInput.value = ''

I leave you some links so you can investigate more about these topics;

Introduction to DOM manipulation

getElementById ()

Element input and attributes

And the code that would solve your problem, as I mentioned earlier, is the following:

var input = document.getElementById('input_js');

function validanumero(numero){
  if (!/^([0-9])*$/.test(numero)){
    alert("Ingrese solo numeros");
    input.value = '';
  }
}

 <input id="input_js" class="cajas" type="text" name="username" maxlength="10"
               onblur="return validanumero(this.value)" required title="Solo 
 numeros">